.marquee {
    display: flex;
    align-items: center;
    height: var(--marquee-item-height, 100px);

    position: relative;
    overflow-x: hidden;
    /* mask-image: linear-gradient(to right,
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0)); */
}

.marquee--8 {
    --marquee-item-width: 160px;
    --marquee-item-height: 100px;
    --marquee-duration: 75s;
    --marquee-items: 19;
}

.marquee__item {
    width: 120px;
	height: 100px !important;
    object-fit: contain;
    --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;
    left: var(--marquee-item-offset);
    /* Fallback to left */
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

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