:root {
    /* Z-index слоев */
    --z-sun: 6;
    --z-stars: 3;
    --z-carpets: 4;
    --z-figures: 5;
    --z-text: 6;
}

.banner-maslenica__link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-maslenica__sun,
.banner-maslenica__star,
.banner-maslenica__carpet,
.banner-maslenica__figures,
.banner-maslenica__content {
    position: absolute;
    pointer-events: none;
}

.banner-maslenica__sun,
.banner-maslenica__sun-part_left,
.banner-maslenica__sun-part_right,
.banner-maslenica__star_left,
.banner-maslenica__star_right,
.banner-maslenica__figures {
    transition: transform 0.3s ease-out;
    will-change: transform;
}

.banner-maslenica {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2 / 0.9;
    background: -o-linear-gradient(180deg, rgb(255, 216, 71), rgb(255, 201, 0));
    background: -webkit-linear-gradient(180deg, rgb(255, 216, 71), rgb(255, 201, 0));
    background: -moz-linear-gradient(180deg, rgb(255, 216, 71), rgb(255, 201, 0));
    background: linear-gradient(180deg, rgb(255, 216, 71), rgb(255, 201, 0));
    position: relative;
    text-transform: uppercase;
    color: #BA141E;
    font-family: 'OpenSans', sans-serif;
}

.banner-maslenica__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateY(24%);
}

.banner-maslenica__content p {
    margin: 0;
    padding: 0;
}

.banner-maslenica__title {
    font-size: clamp(1.3rem, 0.8514rem + 2.25vw, 4.5rem);
    text-align: center;
    line-height: 1.2;
    font-weight: 800;
}

.banner-maslenica__subtitle {
    font-size: clamp(1.15rem, 0.6554rem + 1.9vw, 4rem);
    text-align: center;
    line-height: 1.2;
    font-weight: 800;
}

/* Солнце */
.banner-maslenica__sun {
    z-index: var(--z-sun);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(30%);
}

.banner-maslenica__sun-part {
    width: clamp(4rem, 0.5405rem + 17.2973vw, 20rem);
    height: clamp(4rem, 0.5405rem + 17.2973vw, 20rem);
    background-image: url('../img/sun.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.banner-maslenica__sun-part_left {
    transform: translateX(-50%);
}

.banner-maslenica__sun-part_right {
    transform: translateX(50%);
}

/* Звезды */
.banner-maslenica__star {
    z-index: var(--z-stars);
    width: clamp(2rem, -0.2703rem + 11.3514vw, 12.5rem);
    height: clamp(2rem, -0.2703rem + 11.3514vw, 12.5rem);
    background-image: url('../img/star.png');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(0%);
}

.banner-maslenica__star_left {
    left: -3%;
}

.banner-maslenica__star_right {
    right: -6%;
}

/* Ковры */
.banner-maslenica__carpet {
    z-index: var(--z-carpets);
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-maslenica__carpet_top {
    top: 0;
    height: 7%;
    width: 100%;
    background-image: url(../img/carpet-top.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: cover;
}

.banner-maslenica__carpet_bottom {
    bottom: 0;
    width: 100%;
    height: 40%;
    background-image: url(../img/carpet-bottom.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

/* Фигурки */
.banner-maslenica__figures {
    bottom: 0;
    z-index: var(--z-figures);
    height: 100%;
    max-height: clamp(7.5rem, 0.473rem + 32vw, 40rem);
    aspect-ratio: 205 / 124;
    background-image: url('../img/figures.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
}

/* Адаптив */
/*@media (max-width: 1880px) {
    .banner-maslenica {
        aspect-ratio: 2 / 1;
    }

    .banner-maslenica__figures {
        transform: translateX(-40%);
    }
}*/

@media (max-width: 1600px) {
    .banner-maslenica {
        aspect-ratio: 2 / 0.95;
    }
}

@media (max-width: 1200px) {
    .banner-maslenica {
        aspect-ratio: 2 / 1;
    }
}

@media (max-width: 880px) {
    .banner-maslenica {
        aspect-ratio: 2 / 1.1;
    }

    .banner-maslenica__figures {
        max-height: clamp(7.5rem, 0.473rem + 37vw, 40rem);
    }
}

@media (max-width: 700px) {
    .banner-maslenica {
        aspect-ratio: 2 / 1.2;
    }

    .banner-maslenica__figures {
        max-height: clamp(7.5rem, 0.473rem + 38vw, 40rem);
    }
}

@media (max-width: 510px) {
    .banner-maslenica {
        aspect-ratio: 2 / 1.5;
    }

    .banner-maslenica__figures {
        max-height: clamp(7.5rem, 0.473rem + 40vw, 40rem);
    }
}

@media (max-width: 460px) {
    .banner-maslenica {
        aspect-ratio: 2 / 1.65;
    }
}

@media (max-width: 380px) {
    .banner-maslenica {
        aspect-ratio: 2 / 1.7;
    }
}