@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0}*,*:before,*:after{box-sizing:border-box}body{padding:4rem;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;height:100vh;margin:0;font-family:Quicksand,sans-serif;text-align:center;color:#fff}.list{--height: 150px;height:var(--height);overflow:hidden;list-style:none;opacity:0;transition:opacity 2s ease}.list:has(.animating){opacity:1}.list>ul{transform:translateY(var(--offset, 0px));min-height:var(--height);padding:0}.list>ul>li{height:var(--height);display:flex;align-items:center;text-align:center;font-size:40px}button{all:unset;padding-inline:2rem;color:#fff;background-color:#000;border-radius:5px;height:50px}.animating{transition:transform 20s cubic-bezier(.25,.215,.335,1.02)}[data-next]{display:none}[data-index="0"] [data-next="0"],[data-index="1"] [data-next="1"],[data-index="2"] [data-next="2"],[data-index="3"] [data-next="3"]{display:block}.images{--items: 33;position:fixed;z-index:-1;top:0;right:0;bottom:0;left:0;width:calc(100vw * var(--items));animation:slide 300s linear infinite;display:flex;align-items:stretch;background-color:#000}.images>img{flex:1;object-fit:cover;opacity:.7;overflow:hidden}@keyframes slide{0%{transform:translate(0)}to{transform:translate(calc(-1 * (var(--items) - 1) * 100vw))}}