/* =========================================================
   BEAUTY BY TMY
   SHOP BY CATEGORY
   ========================================================= */


.beauty-categories {

    width:
        100%;

    max-width:
        none;

    padding:
        42px 38px 36px;

    background:
        #fffaf8;

}


/* =========================================================
   HEADING
   ========================================================= */


.beauty-category-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;

}


.beauty-category-heading h2 {

    margin:
        0;

    color:
        #171313;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -0.04em;

}


.beauty-category-view-all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding-bottom:
        4px;

    color:
        #e22d70;

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


.beauty-category-view-all span {

    font-size:
        1.2rem;

    line-height:
        1;

}


/* =========================================================
   GRID
   ========================================================= */


.beauty-category-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        24px;

}


/* =========================================================
   CATEGORY ITEM
   ========================================================= */


.beauty-category {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-width:
        0;

    text-align:
        center;

}


/* =========================================================
   IMAGE
   ========================================================= */


.beauty-category__image {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #f7e7e9;

    border-radius:
        50%;

}


.beauty-category__image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

}


/* =========================================================
   LABEL
   ========================================================= */


.beauty-category__label {

    display:
        block;

    margin-top:
        12px;

    color:
        #171313;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


/* =========================================================
   TABLET
   ========================================================= */


@media (min-width: 768px) and (max-width: 1023px) {

    .beauty-categories {

        padding:
            38px 24px 34px;

    }


    .beauty-category-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap:
            16px;

    }


    .beauty-category__label {

        font-size:
            0.7rem;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */


@media (max-width: 767px) {

    .beauty-categories {

        padding:
            32px 18px 30px;

    }


    .beauty-category-heading {

        align-items:
            center;

        margin-bottom:
            20px;

    }


    .beauty-category-heading h2 {

        font-size:
            clamp(
                31px,
                9vw,
                40px
            );

    }


    .beauty-category-view-all {

        font-size:
            0.62rem;

    }


    .beauty-category-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap:
            10px;

    }


    .beauty-category__image {

        border-radius:
            50%;

    }


    .beauty-category__label {

        margin-top:
            9px;

        font-size:
            0.58rem;

        letter-spacing:
            0.02em;

    }

}