/* --- Slider Core --- */
.client-slider {

    position: relative;
    overflow: hidden;
    /* CRUCIAL: Hides the content outside the view */
}

/* Track settings */
.slider-track {
    display: flex;
    /* transition must be here for smooth slide */
    transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Individual Slide setup */
.logo-slide {
    flex-shrink: 0;
    /* Prevents logos from shrinking when space is tight */
    /* Set padding/alignment here, width is set below in media queries */
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    /* Centers images vertically if needed */
    align-items: center;
    justify-content: center;
}

.logo-slide img {
    max-width: 90%;
    /* Give a little buffer */
    height: auto;
    max-height: 80px;
    /* Optional: Constrain logo height for uniformity */
    display: block;
    /* filter: grayscale(100%); */
    opacity: 1;
    transition: all 0.3s;
}

.logo-slide img:hover {
    filter: none;
    opacity: 1;
}

/* --- Responsive Widths (MUST match JS: 2, 3, 4, 6) --- */

/* Default: 2 logos per view (Mobile first) */
.logo-slide {
    width: 50%;
    /* 100% / 2 */
}

/* Small devices (>= 576px) */
@media (min-width: 576px) {
    .logo-slide {
        width: 33.333%;
        /* 100% / 3 */
    }
}

/* Medium devices (>= 768px) */
@media (min-width: 768px) {
    .logo-slide {
        width: 25%;
        /* 100% / 4 */
    }
}

/* Large devices (>= 992px) */
@media (min-width: 992px) {
    .logo-slide {
        width: 16.666%;
        /* 100% / 6 (LOGOS_PER_VIEW) */
    }
}