.marquee {
    --marquee-gap: 24px;

    overflow: hidden;
    padding-block: 8px;
}

.marquee__track,
.marquee__group {
    display: flex;
    gap: var(--marquee-gap);
    width: max-content;
}

.marquee__group,
.marquee__group > * {
    flex-shrink: 0;
}

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
    .marquee__group:not(:first-child) {
        display: none;
    }
}

@media (max-width: 1023px) {
    .marquee__track {
        width: 100%;
    }

    .marquee__group:first-child {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .marquee__group:first-child > * {
        width: 100%;
        max-width: 100%;
    }

    .marquee__group:first-child > :nth-child(n + 5) {
        display: none;
    }
}