@property --sponsors-x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

@property --sponsors-x-reverse {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

@keyframes sponsors-slide {
    from {
        --sponsors-x: 0%;
    }

    to {
        --sponsors-x: -100%;
    }
}

@keyframes sponsors-slide-reverse {
    from {
        --sponsors-x-reverse: -100%;
    }

    to {
        --sponsors-x-reverse: 0%;
    }
}

.marquee-sponsors {
    overflow: hidden;
    flex-shrink: 0;
}

.marquee-sponsors-content {
    flex-shrink: 0;
    translate: calc(var(--sponsors-x));
    animation: sponsors-slide 20s linear infinite;
}

.marquee-sponsors-content-reverse {
    flex-shrink: 0;
    translate: calc(var(--sponsors-x-reverse));
    animation: sponsors-slide-reverse 20s linear infinite;
}