.slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(128, 128, 128); /* Замените #000 на другой цвет/изображение при желании */
}

/* Базовые стили слайдов */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

    /* Активный слайд появляется (в том числе запускается анимация зума) */
    .slide.active {
        opacity: 1;
        z-index: 2;
        animation: zoomIn 5s ease forwards; /* За 4 секунды плавно приближается и остаётся на месте */
    }

    /* Когда слайд начинает скрываться, сохраняем увеличенный масштаб и плавно скрываем */
    .slide.fade-out {
        transform: scale(1.1);
        opacity: 0;
        transition: opacity 1s ease-in-out;
        z-index: 1; /* ниже активного слайда */
    }

/* Ключевые кадры увеличения: от масштаба 1 до 1.1 */
@keyframes zoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}
#Slide1 {
    background: url("Images/HomeSlides/Hor1.avif") center/cover no-repeat;
}
#Slide2 {
    background: url('Images/HomeSlides/Hor2.avif') center/cover no-repeat;
}
#Slide3 {
    background: url('Images/HomeSlides/Hor4.avif') center/cover no-repeat;
}

@media only screen and (max-width: 768px) {
    .slider{
        height:50vh;
    }
}