/* =========================================================
   BEAUTY BY TMY
   BENEFITS
   ========================================================= */


.beauty-benefits {

    display:
        grid;

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

    width:
        100%;

    background:
        #fffdfc;

    border-top:
        1px solid #f0e9e6;

    border-bottom:
        1px solid #e8e1de;

}


/* =========================================================
   BENEFIT ITEM
   ========================================================= */


.beauty-benefit {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-width:
        0;

    padding:
        20px 12px;

}


/* =========================================================
   DIVIDERS
   ========================================================= */


.beauty-benefit + .beauty-benefit {

    border-left:
        1px solid #eee7e4;

}


/* =========================================================
   ICON
   ========================================================= */


.beauty-benefit__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 26px;

    width:
        26px;

    height:
        26px;

    color:
        #2b2b2b;

}


.beauty-benefit__icon i {

    font-size:
        20px;

    line-height:
        1;

}


/* =========================================================
   TEXT
   ========================================================= */


.beauty-benefit__content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

}


.beauty-benefit strong {

    display:
        block;

    max-width:
        130px;

    color:
        #1c1c1c;

    font-size:
        0.64rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;

}


.beauty-benefit span {

    display:
        block;

    margin-top:
        3px;

    color:
        #77706d;

    font-size:
        0.6rem;

    line-height:
        1.25;

}


/* =========================================================
   TABLET
   Keep all four on one row
   ========================================================= */


@media (min-width: 521px) and (max-width: 900px) {

    .beauty-benefits {

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

    }


    .beauty-benefit {

        gap:
            8px;

        padding:
            18px 8px;

    }


    .beauty-benefit__icon {

        flex-basis:
            22px;

        width:
            22px;

        height:
            22px;

    }


    .beauty-benefit__icon i {

        font-size:
            17px;

    }


    .beauty-benefit strong {

        max-width:
            105px;

        font-size:
            0.56rem;

    }

}


/* =========================================================
   MOBILE
   2 x 2 grid
   ========================================================= */


@media (max-width: 520px) {

    .beauty-benefits {

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

    }


    .beauty-benefit {

        justify-content:
            flex-start;

        gap:
            10px;

        padding:
            18px 14px;

    }


    .beauty-benefit:nth-child(3) {

        border-left:
            0;

        border-top:
            1px solid #eee7e4;

    }


    .beauty-benefit:nth-child(4) {

        border-top:
            1px solid #eee7e4;

    }


    .beauty-benefit__icon {

        flex:
            0 0 24px;

        width:
            24px;

        height:
            24px;

    }


    .beauty-benefit__icon i {

        font-size:
            18px;

    }


    .beauty-benefit strong {

        max-width:
            110px;

        font-size:
            0.58rem;

    }


    .beauty-benefit span {

        font-size:
            0.56rem;

    }

}