:root {
    --item-width: 150px;
    --item-height: 150px;
    --total-items: 8;
    --animation-duration: 30s;
    --spacing: 50px;
}

.wrapper {
    width: 90%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: var(--item-height);
    margin-top: 2rem;
    overflow: hidden;
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0));
}

@keyframes scrollLeft {
    to {
        left: calc(var(--item-width) * -1);
    }
}

.item {
    width: var(--item-width);
    height: var(--item-height);
    border-radius: 6px;
    position: absolute;
    left: max(calc((var(--item-width) + var(--spacing)) * var(--total-items)), 100%);
    animation-name: scrollLeft;
    animation-duration: var(--animation-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    margin-right: var(--spacing);
    animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - var(--n)) * -1);
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}