.logo-bar {
    position: relative;
    overflow: hidden;
    padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem);
    background-color: var(--color-paper);
}

.logo-bar-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
    margin: 0;
    padding: 0 var(--page-gutter);
    list-style: none;
}

.logo-bar.is-looping {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logo-bar.is-looping .logo-bar-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding: 0;
    will-change: transform;
}

.logo-bar-item a {
    display: grid;
    place-items: center;
    height: clamp(3rem, 2.5rem + 1.5vw, 4.25rem);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-small);
    transition: background-color var(--duration-fast) ease;
}

.logo-bar-item img {
    width: auto;
    max-width: 11rem;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
}

@media (hover: hover) {
    .logo-bar-item a:hover {
        background-color: var(--color-mist);
    }
}