/* Основной контейнер слайдера */
.slider {
  width: 50%; /* Фиксированная ширина слайдера */
  overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */
  position: relative; /* Необходимо для правильного позиционирования кнопок */
  margin: 0 auto; /*Для позиционирования по центру*/
}

/* Контейнер всех слайдов */
.slides {
  display: flex; /* Размещаем слайды в одну линию */
  transition: transform 0.5s ease-in-out; /* Анимация плавного смещения */
}

/* Каждый отдельный слайд */
.slide {
  width: 100%; /* Занимает всю ширину контейнера */
  flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */
}

/* Стили для изображений */
.slide img {
  width: 100%; /* Картинки растягиваются на весь слайд */
  display: block; /* Убираем пробелы вокруг изображений */
}

/* Кнопки «Назад» и «Вперёд» */
.prev, .next {
  position: absolute; /* Позволяет располагать кнопки поверх слайдов */
  top: 50%; /* Размещаем по вертикали по центру */
  transform: translateY(-50%); /* Сдвигаем кнопки вверх на половину их высоты */
  background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон кнопок */
  color: white; /* Белый цвет текста */
  border: none; /* Убираем границы */
  padding: 2em; /* Отступы внутри кнопки */
  cursor: pointer; /* Изменяем курсор на указатель */
  font-size: 0.7em; /* Размер шрифта */
  font-weight: bold; /* Делаем текст жирным */
  z-index: 2; /* Размещаем кнопки выше всех элементов */
}

/* Позиционируем кнопку «Назад» слева */
.prev {
  left: 10px;
}

/* Позиционируем кнопку «Вперёд» справа */
.next {
  right: 10px;
}