:root{--radius-2: 5px}*,*:after,*:before{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;font-family:Google Sans,sans-serif,system-ui;width:100vw;overflow-x:hidden;height:300vh;background:var(--surface-2)}ul,img{animation:scale-up both ease-in;animation-timeline:scroll(root)}ul{--big-tile-size: 50vmin;--scale: .4;--rotation: 270deg;--tile-size: calc(var(--big-tile-size) / 3);list-style-type:none;padding:0;margin:0;display:grid;gap:1vmin;grid-template:repeat(9,var(--tile-size)) / repeat(9,var(--tile-size));position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--scale))}@keyframes scale-up{0%{transform:translate(-50%,-50%) scale(var(--scale)) rotate(0)}to{transform:translate(-50%,-50%) scale(1) rotate(var(--rotation))}}img{--rotation: -270deg;--scale: 1;height:200%;min-width:200%;aspect-ratio:1;-o-object-fit:cover;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}li{padding:0;position:relative;background:#bfbfbf33;max-inline-size:100%}li{grid-column:var(--x1, auto) / var(--x2, auto);grid-row:var(--y1, auto) / var(--y2, auto)}li{border-radius:var(--radius-2);overflow:hidden}