.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #001f3f;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: opacity, transform;
    pointer-events: none;
}

.hero-bg-layer--current {
    opacity: 1;
    transform: scale(1.04);
    animation: heroBackgroundDrift 8s ease-in-out infinite alternate;
}

.hero-bg-layer--next {
    opacity: 0;
    transform: scale(1.12);
    transition:
        opacity 1450ms cubic-bezier(.22, .61, .36, 1),
        transform 3600ms cubic-bezier(.22, .61, .36, 1);
}

.hero.is-bg-changing .hero-bg-layer--next {
    opacity: 1;
    transform: scale(1.045);
}

.hero_overlay {
    z-index: 1;
}

.hero > .container {
    position: relative;
    z-index: 2;
}

.hero_slider-slide_content .title,
.hero_slider-slide_content .title span,
.hero_slider-slide_content .title .highlight {
    color: #f4f7fb !important;
    text-shadow: 0 3px 18px rgba(0, 8, 18, 0.46);
}

.hero_thumbs-thumb_inner {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes heroBackgroundDrift {
    from {
        transform: scale(1.04) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.075) translate3d(-10px, -6px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-layer--current {
        animation: none;
    }

    .hero-bg-layer--next {
        transition: opacity 300ms ease;
    }
}