.wila-marquee {
    overflow: hidden;
    width: 100%;
    background-color: #1B3A0A;
}

.wila-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    /* JS sets animation-duration and animation-direction inline once it
       has measured the duplicated track width, then adds this class. */
}

.wila-marquee-track.wila-marquee-ready {
    animation-name: wila-marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.wila-marquee-pause-hover:hover .wila-marquee-track {
    animation-play-state: paused;
}

.wila-marquee-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: #F5F7F2;
    font-weight: 600;
    font-size: 16px;
}

.wila-marquee-item a {
    color: inherit;
    text-decoration: none;
}

.wila-marquee-item a:hover {
    text-decoration: underline;
}

.wila-marquee-sep {
    display: inline-block;
    color: rgba(245, 247, 242, 0.5);
    line-height: 1;
}

@keyframes wila-marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Respect users who've asked for reduced motion: keep the content
   visible and readable instead of forcing a scroll animation on them. */
@media (prefers-reduced-motion: reduce) {
    .wila-marquee-track.wila-marquee-ready {
        animation: none;
    }

    .wila-marquee {
        overflow-x: auto;
    }
}