/* ОСНОВНЫЕ СТИЛИ */
.slider-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
margin: 0;
padding: 0;
background: #191A1D;
}

.slider-wrapper {
position: relative;
width: 100%;
height: 100%;
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Картинка заполняет весь экран */

opacity: 0;
z-index: 1;

/* ХИТРОСТЬ ДЛЯ "ЧЕТКОГО" ПЕРЕХОДА:
   Когда слайд становится НЕ активным (класс active убирается), 
   мы задерживаем (delay) его исчезновение на 2 секунды.
   Он остается видимым, пока новый слайд (z-index 2) плавно появляется поверх него.
   После 2 секунд старый слайд мгновенно выключается (duration 0s), но мы этого не видим, так как он уже перекрыт.
*/
transition: opacity 0s linear 2s; 
}

.slide.active {
opacity: 1;
z-index: 2;
/* Когда слайд становится активным, он плавно появляется за 2 секунды без задержки */
transition: opacity 2s ease-in-out; 
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}