.cr-logo-scroller {
    overflow: hidden;
    width: 100%;
}

.cr-logo-scroller-mask {
    width: 100%;
    /* Mask restored for fade effect */
    display: flex; /* Allow tracks to sit side-by-side */
    overflow: hidden; /* Ensure content outside mask is hidden */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.cr-logo-scroller-track {
    display: flex; /* Changed from inline-flex to flex */
    align-items: center;
    gap: var(--cr-scroll-gap, 3rem);
    padding-right: var(--cr-scroll-gap, 3rem); /* Add padding to complete the loop cycle */
    width: auto; /* Let it grow based on content */
    flex: 0 0 auto; /* Prevent shrinking */
    animation: cr-logo-scroll var(--cr-scroll-duration, 40s) linear infinite;
    box-sizing: border-box; /* Ensure padding is part of the box model */
    will-change: transform; /* Optimize for animation performance */
    transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}

.cr-logo-scroller[data-direction="right"] .cr-logo-scroller-track {
    animation-name: cr-logo-scroll-right;
}

.cr-logo-scroller-pause-hover:hover .cr-logo-scroller-track {
    animation-play-state: paused;
}

.cr-logo-scroller-item {
    flex-shrink: 0; /* Prevent items from shrinking even if container is constrained */
}

.cr-logo-scroller-item img {
    display: block;
    max-height: 100px;
    height: auto;
    width: auto;
}

@keyframes cr-logo-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%); /* Move by full track width */
    }
}

@keyframes cr-logo-scroll-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}