.marquee {
    overflow: hidden;
    user-select: none;
}

.marquee-items {
    display: flex;
    gap: 1.5em;
    transform: none;
    transition: none;
}

    .marquee-items.scroll {
        transform: translateX(calc(-100% - 1.5em));
        transition: 1s;
    }

.marquee-item {
    cursor: pointer;
    flex: 0 0 100%;
}

@media (min-width: 60em) {
    .marquee-item {
        flex: 0 0 calc((100% - 3em) / 3);
    }

    .marquee-items.scroll {
        transform: translateX(calc((-100% - 1.5em) / 3));
    }
}