.flex-layout.marquee-layout{
    padding-inline: 0;
    padding-block: 1rem;
    width: 100%; overflow: hidden;
    cursor: grab;
    user-select: none;
    /* margin-block: 0; */
}

.flex-layout.marquee-layout:active {
    cursor: grabbing;
}

.marquee-layout .marquee-wrapper{
    display: flex; flex-direction: row; gap: 2rem; 
    align-items: center; justify-content: flex-start;
    flex-wrap: nowrap; overflow-x: visible; 
}

.marquee-layout .marquee-wrapper .marquee-item{
    white-space: nowrap; text-transform: uppercase; font-weight: 600;
    font-size: max(2rem, calc(2 * var(--su))); line-height: 1;
}

.marquee-layout .marquee-wrapper .dot{
    width: 1em; height: 1em; aspect-ratio: 1/1;
    border-radius: 50%; background-color: var(--primary-color);
    display: inline-block; flex-shrink: 0;
}