/* Основной контейнер слайдера */
.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: auto;
    text-align: center;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex-shrink: 0;
    position: relative;
    /* Ширина будет устанавливаться динамически */
}

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

        /* Подписи к слайдам */
        .caption {
            position: absolute; /* Размещаем поверх изображения */
            bottom: 10px; /* Отступ от нижнего края */
            left: 50%; /* Центрируем по горизонтали */
            transform: translateX(-50%); /* Корректируем смещение влево на 50% ширины */
            background: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный фон */
            color: white; /* Белый текст */
            padding: 5px 10px; /* Отступы */
            font-size: 14px; /* Размер шрифта */
            border-radius: 5px; /* Скругляем углы */
        }

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

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

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

        /* Адаптивные стили для мобильных устройств */
        @media (max-width: 200px) {
            .slider {
                max-width: 100%; /* Растягиваем слайдер на всю ширину экрана */
            }

            .prev, .next {
                padding: 5px; /* Уменьшаем размер кнопок */
                font-size: 14px; /* Делаем шрифт поменьше */
            }

            .caption {
                font-size: 12px; /* Уменьшаем текст подписи */
                padding: 3px 6px; /* Уменьшаем отступы */
            }
        }