* {
    box-sizing: border-box; /* Устанавливаем box-sizing для всех элементов */
}

.carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin: 0; /* Убираем отступы */
    padding: 0; /* Убираем отступы */
}

.carousel-container {
    position: relative;
    justify-content: center; 
    width: 100%; /* Устанавливаем ширину контейнера в 100% */
    height: auto; /* Высота слайдера */
    margin: 0 auto; /* Выравнивание по центру */
    overflow: hidden; /* Скрытие частей изображения, выходящих за пределы контейнера */
}

.carousel-slide {
    display: flex; /* Это flex-контейнер для слайдов */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    width: 100%; /* Устанавливаем ширину слайдов в 100% */
    transition: transform 0.5s ease-in-out;
}

.carousel-image {
    height: auto;
    max-height: 520px;
    width: auto; /* Ширина будет автоматически подстраиваться */
    max-width: 100%; /* Ограничиваем максимальную ширину */
    object-fit: cover; /* Сохраняем пропорции изображения и обрезаем, если нужно */
    display: block;
    transition: all 0.5s ease;
    opacity: 1; /* Устанавливает непрозрачность картинок */
}

.carousel-dots {
    text-align: center;
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}