.media-slider {
position: relative;
display: block;
width: 100%;
height: 38vw;
overflow: hidden;
isolation: isolate;
background-color: var(--anthracite);
}

.media-slider__slide {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition-property: opacity;
transition-duration: var(--media-slider-transition, 1800ms);
transition-timing-function: ease-in-out;
}

.media-slider__slide.is-active {
z-index: 2;
opacity: 1;
}

.media-slider__slide.is-leaving {
z-index: 3;
opacity: 0;
}

.media-slider__media {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: var(--media-position-desktop, 50% 50%);
transform-origin: center center;
}

.media-slider__slide[data-ken-burns="in"].is-active .media-slider__media,
.media-slider__slide[data-ken-burns="in"].is-leaving .media-slider__media {
animation: mediaSliderZoomIn var(--media-slider-duration, 8500ms) ease-out both;
}

.media-slider__slide[data-ken-burns="out"].is-active .media-slider__media,
.media-slider__slide[data-ken-burns="out"].is-leaving .media-slider__media {
animation: mediaSliderZoomOut var(--media-slider-duration, 8500ms) ease-out both;
}

.media-slider.is-paused .media-slider__media {
animation-play-state: paused !important;
}

@keyframes mediaSliderZoomIn {
from { transform: scale(1); }
to { transform: scale(var(--media-slider-scale, 1.05)); }
}

@keyframes mediaSliderZoomOut {
from { transform: scale(var(--media-slider-scale, 1.05)); }
to { transform: scale(1); }
}

@media only screen and (max-width: 1440px) {
.media-slider { height: 42vw; }
}

@media only screen and (max-width: 1240px) {
.media-slider { height: 47vw; }
}

@media only screen and (max-width: 1080px) {
.media-slider { height: 52vw; }
}

@media only screen and (max-width: 768px) {
.media-slider { height: 60vw; }
}

@media only screen and (max-width: 640px) {
.media-slider { height: 64vw; }
}

@media only screen and (max-width: 480px) {
.media-slider {
height: auto;
aspect-ratio: 9 / 16;
}
.media-slider__media { object-position: var(--media-position-mobile, 50% 50%); }
}

@media (prefers-reduced-motion: reduce) {
.media-slider__slide { transition-duration: 200ms !important; }
.media-slider__media { animation: none !important; transform: none !important; }
}