/* Container hides overflowing images */
.carousel-wrapper {
    overflow: hidden;
    width: 100%; /* or set specific width */
}

/* Inner slider as flex container for horizontal images */
.carousel-inner-slider {
    display: flex;
    transition: transform 0.5s ease;
}

/* Each slide item takes up 1/8th of container width to show 8 images at once */
.slide-item {
    flex: 0 0 calc(100% / 8);
}

/* Image styling */
.carousel-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Optional: responsiveness for smaller screens */
@media (max-width: 992px) {
    .slide-item {
        flex: 0 0 calc(100% / 4); /* 4 images per view on small screens */
    }
}