:root{
    --girl-width: 1050px;
    --girl-left-coeff: 0.17;
    --title-top-coeff: 0.3;
    --title-right-coeff: 0.065;
    --title-first-fs-coeff: 0.044;
    --title-second-fs-coeff: 0.037;
}

.girl {
    position: relative;
    left: calc(var(--girl-width) * var(--girl-left-coeff));
    aspect-ratio: 1050 / 840;
    height: auto;
    width: var(--girl-width);
    max-width: 1050px;
    will-change: transform;
    z-index: 1;
}

.girl:before {
    content: "";
    position: absolute;
    right: 90%;
    top: -15%;
    z-index: 1;
    aspect-ratio: 74 / 130;
}

.girl__title {
    position: absolute;
    top: calc(var(--girl-width) * var(--title-top-coeff));
    right: calc(var(--girl-width) * var(--title-right-coeff));
    transform: rotate(4deg);
    font-family: "Neucha", cursive;
    font-weight: 400;
    font-style: normal;
    color: #440040;
    line-height: 1.2;
    text-align: center;
    font-size: calc(var(--girl-width) * var(--title-second-fs-coeff));

    & > span:first-child {
        font-size: calc(var(--girl-width) * var(--title-first-fs-coeff));
        color: #FF0042;
    }
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --girl-width: clamp(100px, min(70vw, 50vh), 600px);
        --girl-left-coeff: 0.12;
    }

    .girl {
        background: image-set(
                url("../img/girl/girl_mobile@1x.webp") 1x,
                url("../img/girl/girl_mobile@2x.webp") 2x
        ) center/contain no-repeat;
        width: clamp(100px, min(70vw, 50vh), 600px);
    }

    .girl:before {
        background: image-set(
                url("../img/mask/mask_heart_mobile@1x.webp") 1x,
                url("../img/mask/mask_heart_mobile@2x.webp") 2x
        ) center/contain no-repeat;
        width: clamp(40px, min(18vw, 8vh), 74px);
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 1024px) {
    .girl {
        background: image-set(
                url("../img/girl/girl_tablet@1x.webp") 1x,
                url("../img/girl/girl_tablet@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .girl:before {
        background: image-set(
                url("../img/mask/mask_heart_tablet@1x.webp") 1x,
                url("../img/mask/mask_heart_tablet@2x.webp") 2x
        ) center/contain no-repeat;
        width: clamp(74px, min(24vw, 17vh), 187px);
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --girl-width: clamp(100px, min(41vw, 79vh), 1050px);
    }

    .girl {
        background: image-set(
                url("../img/girl/girl_mobile@1x.webp") 1x,
                url("../img/girl/girl_mobile@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .girl:before {
        background: image-set(
                url("../img/mask/mask_heart_mobile@1x.webp") 1x,
                url("../img/mask/mask_heart_mobile@2x.webp") 2x
        ) center/contain no-repeat;
        width: clamp(40px, min(9vw, 20vh), 74px);
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .girl {
        background: image-set(
                url("../img/girl/girl_tablet@1x.webp") 1x,
                url("../img/girl/girl_tablet@2x.webp") 2x
        ) center/contain no-repeat;
    }

    .girl:before {
        background: image-set(
                url("../img/mask/mask_heart_tablet@1x.webp") 1x,
                url("../img/mask/mask_heart_tablet@2x.webp") 2x
        ) center/contain no-repeat;
        width: clamp(74px, min(24vw, 17vh), 187px);
    }
}

@media (orientation: landscape) and (min-width: 1440px) {
    .girl {
        background: image-set(
                url("../img/girl/girl_desktop@1x.webp") 1x,
                url("../img/girl/girl_desktop@2x.webp") 2x
        ) center/contain no-repeat;
    }
}