.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    position: relative;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeScroll 22s linear infinite;
}

    .marquee-content a {
        text-decoration: none;
        color: #000;
        margin-right: 20px;
    }

/* animation */
@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* pause on hover (same as old marquee) */
.marquee:hover .marquee-content {
    animation-play-state: paused;
}