.ioi-logo-marquee {
    --ioi-logo-gap: 80px;
    --ioi-fade-width: 96px;
    --ioi-items-per-view: 7;
    --ioi-item-slot-width: auto;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.ioi-logo-marquee--fade {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--ioi-fade-width),
        #000 calc(100% - var(--ioi-fade-width)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--ioi-fade-width),
        #000 calc(100% - var(--ioi-fade-width)),
        transparent 100%
    );
}

.ioi-logo-marquee__track {
    display: flex;
    width: max-content;
    animation-name: ioi-logo-marquee-scroll;
    animation-duration: 90s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.ioi-logo-marquee__group {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ioi-logo-gap);
    padding-right: var(--ioi-logo-gap);
}

.ioi-logo-marquee__item {
    flex: 0 0 var(--ioi-item-slot-width);
    width: var(--ioi-item-slot-width);
    min-width: 0;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.ioi-logo-marquee__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 0;
}

.ioi-logo-marquee__item img {
    display: block;
    width: auto;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
}

.ioi-logo-marquee--pause-hover:hover .ioi-logo-marquee__track {
    animation-play-state: paused;
}

.ioi-logo-marquee--reverse .ioi-logo-marquee__track {
    animation-direction: reverse;
}

@keyframes ioi-logo-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ioi-logo-marquee__track {
        animation-play-state: paused;
    }
}

.ioi-logo-marquee__empty {
    padding: 18px 20px;
    border: 1px dashed #c7c7c7;
    background: #f7f7f7;
    color: #555;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
}