.marquee {
    /* position: absolute; */
    overflow: hidden;
    --offset: 80vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-300% + var(--offset));
    /* bottom: -38px; */
    width: 100%;
    background: #991c1f;
    color: #fff;
    white-space: nowrap;
    /* top: 0; */
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 8s linear infinite;
    animation-play-state: running;
    z-index: 999;
}

.marquee span {
    font-size: 1.2em;
    padding: 5px 2vw;
    color: #f7ec18;
    font-weight: normal;
}

.marquee:hover .marquee__inner {
    animation-play-state: running;
}

@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}