.lms-wrapper {
    padding-top: var(--lms-padding, 0);
    padding-bottom: var(--lms-padding, 0);
    overflow: hidden;
    width: 100%;
    display: flex;
    user-select: none;
}

.lms-track {
    display: flex;
    width: max-content;
}

/* Static centered layout when items < 6 */
.lms-wrapper.is-static .lms-track {
    width: 100%;
    justify-content: center;
}

.lms-wrapper.is-static .lms-group {
    animation: none;
    padding-right: 0;
}

/* Animated marquee layout when items >= 6 */
.lms-group {
    display: flex;
    align-items: center;
    gap: var(--lms-gap, 40px);
    padding-right: var(--lms-gap, 40px);
    animation: lms-scroll var(--lms-speed, 30s) linear infinite;
    will-change: transform;
}

.lms-wrapper.pause-hover:hover .lms-group {
    animation-play-state: paused;
}

.lms-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lms-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.lms-item img {
    height: var(--lms-height, 45px);
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
}

@keyframes lms-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* 1. Soft fade masks on the left and right edges (optional) */
.lms-wrapper.is-marquee {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 2. Grayscale styling matching your mockup (optional) */
/* .lms-item img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
} */

/* 3. Color restore on hover (optional) */
/* .lms-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
} */