body{display:grid;place-items:center}ul{display:grid;grid:repeat(5,40vw)/repeat(5,40vw);gap:2ch;padding:2ch;scroll-margin:2ch;max-inline-size:80%;max-block-size:80vh;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;-ms-scroll-snap-type:both mandatory;scroll-snap-type:both mandatory}@media (prefers-reduced-motion:no-preference){ul{scroll-behavior:smooth}}ul>li{background:CanvasText;color:Canvas;scroll-snap-align:center;display:grid;place-items:center;grid:[stack] 1fr/[stack] 1fr;max-inline-size:initial;padding:0}ul>li>a{grid-area:stack;inline-size:100%;block-size:100%}ul>li::after,ul>li::before{font-size:2vw;grid-area:stack}ul>li.x.x-selected::after{content:'x:snapped'}ul>li.y.y-selected::before{content:'y:snapped'}ul>li.y.x.x-selected.y-selected{background:linear-gradient(to top,#ff69b4 50%,#639 0);grid-template-rows:1fr 1fr}ul>li.y.x.x-selected.y-selected::after,ul>li.y.x.x-selected.y-selected::before{color:#fff;grid-area:auto}