.logo-bar {
    --logo-bar-space: clamp(1.75rem, 1.25rem + 2vw, 3rem);
    position: relative;
    overflow: hidden;
    padding-block: var(--logo-bar-space) calc(var(--logo-bar-space) + var(--radius-sheet) + var(--stack-m));
    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);
}

.logo-bar-item img {
    width: auto;
    max-width: 11rem;
    height: 100%;
    object-fit: contain;
    transition: transform var(--duration-medium) var(--ease-out);
    -webkit-user-drag: none;
}

@media (hover: hover) {
    .logo-bar-item a:hover img {
        transform: scale(1.08);
    }
}