/* Scrolling accreditation logos shown above the footer */
.logo-scroller {
    background-color: #fff;
    padding: 2.5rem 0;
    overflow: hidden;
}

/* The track holds two identical groups, so moving it left by exactly half loops seamlessly */
.logo-scroller-track {
    display: flex;
    width: max-content;
    animation: logo-scroller-move 60s linear infinite;
}

.logo-scroller:hover .logo-scroller-track {
    animation-play-state: paused;
}

.logo-scroller-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Spacing sits on each item rather than a flex gap, so both groups are exactly equal in width */
.logo-scroller-group li {
    flex-shrink: 0;
    padding-right: 4rem;
}

.logo-scroller-group img {
    display: block;
    height: 100px;
    width: auto;
    max-width: none;
}

@keyframes logo-scroller-move {
    to {
        transform: translateX(-50%);
    }
}

/* Visitors who ask for less motion get a still row they can swipe or scroll instead */
@media (prefers-reduced-motion: reduce) {
    .logo-scroller {
        overflow-x: auto;
    }

    .logo-scroller-track {
        animation: none;
    }

    .logo-scroller-group[aria-hidden="true"] {
        display: none;
    }
}