:root {
    --width: 100px;
    --height: 100px;
    --quantity: 21;
    --gap: 40px
}

body,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%
}

main {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #e4e4e4
}

.slider {
    width: 100%;
    height: calc(var(--height));
    overflow: hidden
}

.slider .list {
    display: flex;
    min-width: calc((var(--width) + var(--gap)) * var(--quantity));
    position: relative
}

.slider .list .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--width);
    height: var(--height);
    position: absolute;
    animation: autoRun 50s linear infinite;
    animation-delay: calc(50s / var(--quantity) * (var(--position) - 1) - 50s);
    transition: filter .5s;
    padding: 1.5px
}

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

@keyframes autoRun {
    0% {
        left: 100%
    }

    to {
        left: calc((var(--width) + var(--gap)) * -1)
    }
}