*,*:after,*:before{box-sizing:border-box}:root{--gap: 1rem;--card-width: clamp(280px, 20vw, 100vw);--card-aspect-ratio: 5 / 7;--card-height: calc(var(--card-width) * (7 / 5))}body{display:grid;place-items:center;font-family:Google Sans,sans-serif,system-ui;overflow-x:hidden;justify-content:center;min-height:100vh}html{scroll-snap-type:y mandatory}.grid{display:grid;padding:calc(50vh - (var(--card-height) * .5)) 0;justify-content:center;grid-template-columns:repeat(3,var(--card-width));gap:1rem;width:100vw}.grid:not(.grid--dummy) .column{grid-column:2}.grid:not(.grid--dummy) .column img{scroll-snap-align:center;animation:scale-in-out both linear;animation-timeline:view();animation-range:cover 15% cover 85%;scale:.5;filter:grayscale(1)}@keyframes scale-in-out{50%{scale:1;filter:grayscale(0)}}.grid--dummy{position:fixed;height:100vh;width:100%;overflow:hidden;inset:0}.column{display:grid;gap:1rem;padding:1rem 0}.grid--dummy .column{translate:0 calc(var(--card-height) + -100% + (0 * var(--gap)));animation:opposite both linear;animation-timeline:scroll(root)}.grid--dummy .column:last-of-type{grid-column:3}@keyframes opposite{to{translate:0 0}}img{max-width:100%;border:0;padding:0;max-height:100%;width:100%;aspect-ratio:5 / var(--h, 7);background:#ccc;-o-object-fit:cover;object-fit:cover}