@keyframes marquee {
    0% {
        transform: translateX(var(--element-gap));
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(var(--element-gap));
    }
}

.marquee__container {
    --element-gap: 14px;
    --animation-length: 20s;
    width: 100%;
    position: relative;
    display: flex;
    gap: var(--element-gap);
}

.marquee__container .marquee {
    display: flex;
    gap: var(--element-gap);
    animation: marquee var(--animation-length) linear infinite;
}

.marquee__container.reverse .marquee {
    animation: marquee-reverse var(--animation-length) linear infinite;
}

.marquee__container .marquee__duplicate {
    position: absolute; 
    top: 0;
    display: flex;
    gap: var(--element-gap);
}

.marquee__container .marquee__duplicate.left {
    right: calc(100% + var(--element-gap));
}

.marquee__container .marquee__duplicate.right {
    left: calc(100% + var(--element-gap));
}