.square-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}.square{transform-origin:center center;aspect-ratio:1/2;width:min(var(--vw,1vw)*170/1280*100,212.5px);height:min(var(--vw,1vw)*240/1280*100,300px);transition:transform .36s linear}.square--even{background-color:#ff4000}.cont--loop .square{animation:a 2s linear infinite;transform:rotate(-15deg)}.cont--loop .square--even{animation:b 2s linear infinite;transform:rotate(15deg)}.cont--mouse .square{pointer-events:auto}.cont--scroll.is-active .square{transform:rotate(-15deg)}.cont--scroll.is-active .square--even{transform:rotate(15deg)}@keyframes a{0%{transform:rotate(0deg)}25%{transform:rotate(15deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0deg)}}@keyframes b{0%{transform:rotate(0deg)}25%{transform:rotate(-15deg)}50%{transform:rotate(0deg)}75%{transform:rotate(15deg)}to{transform:rotate(0deg)}}@media(any-hover:hover){.cont--mouse .square:hover{transform:rotate(15deg)}}