---

/* Старый код из первого примера */
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100%; /* Можно сделать на всю ширину экрана */
  max-width: 600px; /* Или задать максимальную ширину */
  height: 400px; /* Высота вашего слайдера */
  gap: 0px; /* Убираем отступы, чтобы картинки прилегали плотно */
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
}

/* НОВЫЙ КОД: Стили для самих изображений */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Картинка заполнит слайд без искажения пропорций */
  display: block;
}