/* =========================================================
   BEAUTY BY TMY
   LINGERIE FEATURE BANNER
   ========================================================= */


.beauty-lingerie-banner {

    position:
        relative;

    display:
        block;

    width:
        calc(100% - 80px);

    max-width:
        var(
            --lingerie-max-width,
            1320px
        );

    min-height:
        var(
            --lingerie-min-height,
            460px
        );

    margin:
        0 auto;

    overflow:
        hidden;

    background:
        var(
            --lingerie-background,
            #f5ccd8
        );

    color:
        var(
            --lingerie-text,
            #171313
        );

    border-radius:
        24px;

}


/* =========================================================
   SATIN BACKGROUND
   ========================================================= */


.beauty-lingerie-banner__background {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    background-color:
        var(
            --lingerie-background,
            #f5ccd8
        );

    background-image:
        linear-gradient(
            var(
                --lingerie-overlay,
                rgba(
                    245,
                    188,
                    207,
                    0.18
                )
            ),
            var(
                --lingerie-overlay,
                rgba(
                    245,
                    188,
                    207,
                    0.18
                )
            )
        ),
        var(
            --lingerie-background-image
        );

    background-size:
        cover;

    background-position:
        var(
            --lingerie-background-position,
            center center
        );

    background-repeat:
        no-repeat;

    pointer-events:
        none;

}


/* =========================================================
   CONTENT
   ========================================================= */


.beauty-lingerie-banner__content {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    width:
        48%;

    min-height:
        var(
            --lingerie-min-height,
            460px
        );

    padding:
        58px 5vw;

}


/* =========================================================
   EYEBROW
   ========================================================= */


.beauty-lingerie-banner__eyebrow {

    margin:
        0 0 16px;

    color:
        var(
            --lingerie-eyebrow,
            #df2166
        );

    font-family:
        var(
            --lingerie-body-font,
            Arial,
            Helvetica,
            sans-serif
        );

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


/* =========================================================
   HEADLINE
   ========================================================= */


.beauty-lingerie-banner__content h2 {

    max-width:
        520px;

    margin:
        0;

    color:
        var(
            --lingerie-text,
            #171313
        );

    font-family:
        var(
            --lingerie-heading-font,
            Georgia,
            "Times New Roman",
            serif
        );

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    font-weight:
        400;

    line-height:
        0.94;

    letter-spacing:
        -0.045em;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */


.beauty-lingerie-banner__description {

    max-width:
        330px;

    margin:
        20px 0 0;

    color:
        var(
            --lingerie-text,
            #171313
        );

    font-family:
        var(
            --lingerie-body-font,
            Arial,
            Helvetica,
            sans-serif
        );

    font-size:
        17px;

    line-height:
        1.45;

}


/* =========================================================
   BUTTON
   ========================================================= */


.beauty-lingerie-banner__button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        48px;

    margin-top:
        24px;

    padding:
        0 24px;

    background:
        var(
            --lingerie-button-background,
            #df2166
        );

    color:
        var(
            --lingerie-button-text,
            #ffffff
        );

    border:
        1px solid
        var(
            --lingerie-button-border,
            #df2166
        );

    border-radius:
        999px;

    font-family:
        var(
            --lingerie-body-font,
            Arial,
            Helvetica,
            sans-serif
        );

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    line-height:
        1;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;

}


.beauty-lingerie-banner__button:hover {

    transform:
        translateY(-1px);

    opacity:
        0.92;

}


.beauty-lingerie-banner__arrow {

    font-size:
        17px;

    line-height:
        1;

}


/* =========================================================
   BRA / PRODUCT IMAGE
   ========================================================= */


.beauty-lingerie-banner__product {

    position:
        absolute;

    z-index:
        2;

    left:
        var(
            --lingerie-image-x,
            76%
        );

    top:
        var(
            --lingerie-image-y,
            50%
        );

    display:
        block;

    width:
        var(
            --lingerie-image-width,
            58%
        );

    max-width:
        none;

    height:
        auto;

    object-fit:
        contain;

    object-position:
        center;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events:
        none;

    user-select:
        none;

}


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


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

    .beauty-lingerie-banner {

        width:
            100%;

        min-height:
            380px;

        border-radius:
            0;

    }


    .beauty-lingerie-banner__content {

        width:
            50%;

        min-height:
            380px;

        padding:
            46px 34px;

    }


    .beauty-lingerie-banner__content h2 {

        font-size:
            clamp(
                38px,
                6vw,
                54px
            );

    }


    .beauty-lingerie-banner__description {

        max-width:
            270px;

        font-size:
            15px;

    }


    .beauty-lingerie-banner__product {

        left:
            77%;

        width:
            58%;

    }

}


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


@media (max-width: 767px) {

    .beauty-lingerie-banner {

        width:
            100%;

        max-width:
            none;

        min-height:
            300px;

        margin:
            0;

        border-radius:
            0;

    }


    .beauty-lingerie-banner__content {

        width:
            57%;

        min-height:
            300px;

        padding:
            30px 10px 42px 20px;

    }


    .beauty-lingerie-banner__eyebrow {

        margin-bottom:
            10px;

        font-size:
            8px;

    }


    .beauty-lingerie-banner__content h2 {

        max-width:
            235px;

        font-size:
            clamp(
                28px,
                8vw,
                40px
            );

    }


    .beauty-lingerie-banner__description {

        max-width:
            175px;

        margin-top:
            12px;

        font-size:
            12px;

        line-height:
            1.35;

    }


    .beauty-lingerie-banner__button {

        min-height:
            38px;

        margin-top:
            16px;

        padding:
            0 16px;

        gap:
            7px;

        font-size:
            8px;

    }


    .beauty-lingerie-banner__arrow {

        font-size:
            13px;

    }


    .beauty-lingerie-banner__product {

        left:
            79%;

        top:
            52%;

        width:
            57%;

    }

}