.section--hero {
    position: relative;
    overflow: hidden;
}

.hero-slider__bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #eef7fb;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.hero-slider__bg-layer--active {
    opacity: 1;
}

.section--hero > .promo.container,
.section--hero > .service-slider {
    position: relative;
    z-index: 1;
}

@media (max-width: 990px) {
    .hero-slider__bg-layer {
        background-position: top;
        background-size: auto 600px;
    }
}

@media (max-width: 560px) {
    .hero-slider__bg-layer {
        background-size: auto 400px;
    }
}

@media (max-width: 460px) {
    .hero-slider__bg-layer {
        background-size: auto 350px;
    }
}

@media (max-width: 400px) {
    .hero-slider__bg-layer {
        background-size: auto 279px;
    }
}

[data-hero-content] {
    transition: transform 0.5s ease, opacity 0.5s ease, height 0.5s ease;
    transform: translateX(0);
    opacity: 1;
    overflow: hidden;
}

[data-hero-content].hero-slider__content--leaving {
    transform: translateX(-40px);
    opacity: 0;
}

[data-hero-content].hero-slider__content--entering {
    transform: translateX(40px);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider__bg-layer,
    [data-hero-content] {
        transition: none !important;
    }
}