/* Основные стили слайдера */
.slider-fade {
  position: relative;
  width: 100%; /* Занимает всю ширину контейнера */
  max-width: 680px; /* Ограничение для больших экранов */
  height: auto; /* Начальная высота */
  overflow: hidden;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

.slider-fade img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Масштабируем по ширине */
  height: 100%; /* Масштабируем по высоте контейнера */
  object-fit: cover; /* Универсальное кадрирование */
  opacity: 0; /* Прозрачность по умолчанию */
  animation: fadeAnimation 9s infinite;
}

.slider-fade img:nth-child(1) {
  animation-delay: 0s;
}

.slider-fade img:nth-child(2) {
  animation-delay: 3s;
}

.slider-fade img:nth-child(3) {
  animation-delay: 6s;
}

@keyframes fadeAnimation {
  0%, 33.333% {
    opacity: 1; /* Показ изображения */
  }
  33.334%, 100% {
    opacity: 0; /* Скрытие изображения */
  }
}

/* Адаптивные стили для небольших экранов */
@media (max-width: 768px) {
  .slider-fade {
    height: 600px; /* Снижаем высоту для планшетов */
  }
}

@media (max-width: 480px) {
  .slider-fade {
    height: 380px; /* Снижаем высоту для смартфонов */
  }
}

@media (max-width: 350px) {
  .slider-fade {
    height: 250px; /* Минимальная высота для маленьких экранов */
  }
}