.container{width:var(--container-width);gap:var(--unit);caret-color:#0000;flex-direction:column;display:flex;position:relative;overflow:hidden}.container:hover{cursor:pointer}.row{height:var(--unit);justify-content:center;gap:var(--unit);translate:var(--offset);opacity:0;margin-bottom:5px;transition:opacity .5s;display:flex}.container.animate-on-scroll .row{animation:load-row 1s calc(var(--delay)*.1s)forwards;opacity:1}.container.no-load:not(.slide) .row{animation:none;translate:0}.cell{height:100%;width:calc(var(--size,2)*var(--unit));background-color:var(--gray);border-radius:62.5rem}.cell.size-2{--size:2}.cell.size-3{--size:3}.cell.size-4{--size:4}.cell.size-5{--size:5}.cell.size-6{--size:6}.cell.size-7{--size:7}.cell.size-8{--size:8}.cell.size-9{--size:9}.cell.size-10{--size:10}.cell.size-12{--size:12}.cell.size-14{--size:14}.cell.size-16{--size:16}.cell.size-18{--size:18}.cell.size-20{--size:20}.cell.blue{background-color:var(--blue)}.cell.red{background-color:var(--red)}.cell.yellow{background-color:var(--yellow)}.cell.purple{background-color:var(--purple)}.cell.black{background-color:var(--black)}.row:first-child{--delay:1;--offset:18.75rem}.row:nth-child(2){--delay:2;--offset:-15.625rem}.row:nth-child(3){--delay:3;--offset:12.5rem}.row:nth-child(4){--delay:4;--offset:-18.75rem}.row:nth-child(5){--delay:5;--offset:15.625rem}.row:nth-child(6){--delay:6;--offset:-12.5rem}.row:nth-child(7){--delay:7;--offset:18.75rem}.row:nth-child(8){--delay:8;--offset:-15.625rem}.row:nth-child(9){--delay:9;--offset:12.5rem}.row:nth-child(10){--delay:10;--offset:-18.75rem}.row:nth-child(11){--delay:11;--offset:15.625rem}.row:nth-child(12){--delay:12;--offset:-12.5rem}.row:nth-child(13){--delay:13;--offset:12.5rem}.row:nth-child(14){--delay:14;--offset:-18.75rem}.row:nth-child(15){--delay:15;--offset:15.625rem}.row:nth-child(16){--delay:16;--offset:-12.5rem}@keyframes load-row{to{translate:0}}.container.slide:not(.duplicate)>.row{animation:slide 1s calc((var(--delay) - 1)*.1s)both}.row:nth-child(2n){--direction:-1}@keyframes slide{0%{translate:0}to{translate:calc(var(--container-width)*var(--direction,1))}}.container.duplicate{position:absolute}.container.duplicate .row{translate:var(--container-width)}.container.slide .container.duplicate .row{animation:slide 1s calc((var(--delay) - 1)*.1s - .15s)reverse both}.container.slide .container.duplicate .row:nth-child(2n-1){--direction:-1}.container.slide .container.duplicate .row:nth-child(2n){--direction:1}@media (max-width:768px){:root{--unit:.5rem;--container-width:30rem}.container{transform-origin:50%;margin:0 auto;transform:scale(.8)}}@media (max-width:480px){:root{--unit:.4rem;--container-width:22rem}.container{transform-origin:50%;margin:0 auto;transform:scale(.6)}}@media (max-width:360px){:root{--unit:.35rem;--container-width:18rem}.container{transform-origin:50%;margin:0 auto;transform:scale(.5)}.row{margin-bottom:3px}}