.marquee-parent {
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    background-color: transparent;

    display: block;
    overflow: hidden;
    position: relative;
    /* fade at edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.marquee {
    /* set this to the number of items (sibling-count() not widely supported yet) */
    --item-count: 7;
    --duration: calc(3.5s * var(--item-count));
    /* item width and space between, times count */
    width: calc(320px * var(--item-count));
    /* adjust as needed until entire item isn't visible before disappearing */
    margin-left: -40px;
    /* used to pause animation more slowly */
    transform: translateX(0);
    transition: 500ms ease-out;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.marquee > .marquee-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    white-space: nowrap;
    font-family: 'Outfit', 'Noto Sans Hebrew', sans-serif;
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: 0.05em;

    /* draw an animation path starting at 0, 90 degrees to the right to the end of the element  */
    offset: ray(90deg sides at 0);
    animation: marquee var(--duration) linear infinite;
    /* sibling-index() not widely supported yet, so --item-index is set for each logo */
    /* each item delayed by its index divided by total items times duration */
    animation-delay: calc(-1 * (var(--item-count) - var(--item-index)) * var(--duration) / var(--item-count));
}

.marquee > .marquee-item > span:first-child {
    background: linear-gradient(135deg, #FFF2A1 0%, #D4AF37 35%, #F0CD5D 65%, #AA771C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.marquee > .marquee-item {
    font-size: clamp(0.9rem, 2.5vw, 1.25rem);
    gap: clamp(1rem, 3vw, 2rem);
}

.marquee:hover {
    /* transitioned for a less jarring pause */
    transform: translateX(-20px);
}

.marquee.paused > .marquee-item,
.marquee:hover > .marquee-item {
    animation-play-state: paused;
}

@keyframes marquee {
    /* from right to left*/
    from {
        offset-distance: 100%;
    }

    to {
        offset-distance: 0%;
    }
}

/* graceful fallback for when user prefers less motion */
@media (prefers-reduced-motion: reduce) {
    .marquee {
        flex-wrap: wrap;
        gap: 3.0rem;
        width: 100%;
    }

    .marquee:hover {
        transform: translateX(0);
    }

    .marquee .marquee-item {
        animation-play-state: paused;
        offset: none;
    }
}