:root{--card-height:225px;--card-margin:1vw;--card-top-offset:2em;--numcards:5;--outline-width:0}#cards{padding:0;margin:0;padding-bottom:calc(var(--numcards) * var(--card-top-offset));margin-bottom:var(--card-margin)}#card_1{--index:1}#card_2{--index:2}#card_3{--index:3}#card_4{--index:4}#card_5{--index:5}.card{position:sticky;top:0;padding-top:calc(var(--index) * var(--card-top-offset));--index0:calc(var(--index) - 1);--reverse-index:calc(var(--numcards) - var(--index0));--reverse-index0:calc(var(--reverse-index) - 1)}@keyframes scale{to{transform:scale(calc(1.1 - calc(0.1 * var(--reverse-index))))}}#cards{list-style:none;outline:calc(var(--outline-width) * 10) solid blue;position:relative;z-index:9;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(var(--numcards),var(--card-height));gap:var(--card-margin)}.card{outline:var(--outline-width) solid #ff69b4}