.logos-container {
    position: relative;
    overflow: hidden;
    height: 28px;
}

.company-logos {
    display: flex;
    block-size: var(--marquee-item-height);
    margin-block: var(--marquee-item-height);
    overflow-x: hidden;
    --marquee-item-width: 120px;
    --marquee-item-height: 28px;
    --marquee-duration: 24s;
    --marquee-items: 7;
    align-items: center;
    margin: 0;
}

.company-logos .image-wrapper {
    --marquee-item-offset: max(calc(var(--marquee-item-width) * var(--marquee-items)),
            calc(100% + var(--marquee-item-width)));
    --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
    position: absolute;
    inset-inline-start: var(--marquee-item-offset);
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

.image-wrapper:nth-of-type(1) {
    --marquee-item-index: 1;
}

.image-wrapper:nth-of-type(2) {
    --marquee-item-index: 2;
}

.image-wrapper:nth-of-type(3) {
    --marquee-item-index: 3;
}

.image-wrapper:nth-of-type(4) {
    --marquee-item-index: 4;
}

.image-wrapper:nth-of-type(5) {
    --marquee-item-index: 5;
}

.image-wrapper:nth-of-type(6) {
    --marquee-item-index: 6;
}

.image-wrapper:nth-of-type(7) {
    --marquee-item-index: 7;
}


.logos-container:hover .image-wrapper {
    animation-play-state: paused;
}

@keyframes go {
    to {
        inset-inline-start: calc(var(--marquee-item-width) * -1);
    }
}