.banner-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.banner-slideshow {
    display: flex;
    width: 300%; /* 100% for each image */
    transition: transform 0.5s ease-in-out;
}

.banner {
    width: 33.333%; /* 100% divided by number of slides */
    height: auto;
    object-fit: cover;
    flex-shrink: 0;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .banner {
        height: 300px;
        object-fit: cover;
    }
}

@media screen and (max-width: 480px) {
    .banner {
        height: 200px;
    }
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    33.33% {
        transform: translateX(-100%);
    }
    66.66% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}