/* ===== Logos infinite marquee ===== */

.logo-loop {
    --logo-h: 38px;
    --gap: 36px;
    --slot-w: 140px;
    --speed: 50s;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    animation: none;
}

    .logo-track.is-ready {
        animation: logo-marquee var(--speed) linear infinite;
    }

.logo-seq {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex-shrink: 0;
    padding-right: var(--gap);
}

.logo-item {
    flex: 0 0 var(--slot-w);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-item img {
        height: var(--logo-h);
        width: auto;
        max-width: 100%;
        object-fit: contain;
        opacity: .9;
        transition: filter .2s, opacity .2s, transform .2s;
        transform: translateZ(0);
    }

        .logo-item img:hover {
            opacity: 1;
            transform: scale(1.02);
        }

@keyframes logo-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.logo-loop:hover .logo-track {
    animation-play-state: paused;
}

@media (max-width: 575.98px) {
    .logo-loop {
        --logo-h: 22px;
        --gap: 24px;
        --slot-w: 120px;
    }
}