:root{--width: 100px;--height: 100px;--quantity: 13;--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)}}