.logoloop {
    position: relative;
    width: 100%;
    overflow: hidden;

    --logoloop-gap: 32px;
    --logoloop-logoHeight: 28px;
    --logoloop-fadeColorAuto: #ffffff;
}

.logoloop--vertical {
    height: 100%;
    display: inline-block;
}

.logoloop--scale-hover {
    padding-top: calc(var(--logoloop-logoHeight) * 0.1);
    padding-bottom: calc(var(--logoloop-logoHeight) * 0.1);
}

@media (prefers-color-scheme: dark) {
    .logoloop {
        --logoloop-fadeColorAuto: #0b0b0b;
    }
}

.logoloop__track {
    display: flex;
    width: max-content;
    will-change: transform;
    user-select: none;
    position: relative;
    z-index: 0;
}

.logoloop--vertical .logoloop__track {
    flex-direction: column;
    height: max-content;
    width: 100%;
}

.logoloop__list {
    display: flex;
    align-items: center;
    list-style: none;
    /* Reset for Vanilla */
    margin: 0;
    padding: 0;
}

.logoloop--vertical .logoloop__list {
    flex-direction: column;
}

.logoloop__item {
    flex: 0 0 auto;
    margin-right: var(--logoloop-gap);
    font-size: var(--logoloop-logoHeight);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoloop--vertical .logoloop__item {
    margin-right: 0;
    margin-bottom: var(--logoloop-gap);
}

.logoloop__item:last-child {
    margin-right: var(--logoloop-gap);
}

.logoloop--vertical .logoloop__item:last-child {
    margin-right: 0;
    margin-bottom: var(--logoloop-gap);
}

.logoloop__node {
    display: inline-flex;
    align-items: center;
}

.logoloop__item img {
    height: var(--logoloop-logoHeight);
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-user-drag: none;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logoloop--scale-hover .logoloop__item {
    overflow: visible;
}

.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover .logoloop__node {
    transform: scale(1.2);
    transform-origin: center center;
}

.logoloop--scale-hover .logoloop__node {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logoloop__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.logoloop__link:hover {
    opacity: 0.8;
}

/* Adjust for the custom clientele ribbon */
#section-clientele .logoloop {
    background: transparent;
    z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
    .logoloop__track {
        transform: translate3d(0, 0, 0) !important;
    }

    .logoloop__item img,
    .logoloop__node {
        transition: none !important;
    }
}