:root{--card-height:400px;--card-margin:4vw;--card-top-offset:1em;--numcards:4;--outline-width:0px}.header,.main{width:100%;padding:20px;margin:0 auto}.header{height:35vh;display:grid;place-items:center;margin-bottom:80px}#cards{list-style:none;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(var(--numcards),var(--card-height));gap:var(--card-margin);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{position:sticky;top:0;padding-top:calc(var(--index) * var(--card-top-offset))}.card-content{box-shadow:0 .2em 1em rgba(0,0,0,.1),0 1em 2em rgba(0,0,0,.1);background:#fffaf2;color:#131212;border-radius:2rem;overflow:hidden;display:grid;grid-template-areas:"text img";grid-template-columns:1fr 1fr;grid-template-rows:auto;align-items:stretch;padding:1.4em;height:100%}.card-content>div{grid-area:text;width:95%;max-width:800px;place-self:center;text-align:left;display:grid;gap:1em;place-items:start}.card-content>figure{grid-area:img;overflow:hidden}.card-content>figure>img{width:100%;height:100%;object-fit:cover;border-radius:.4em}@supports (animation-timeline:works){@scroll-timeline cards-element-scrolls-in-body{source:selector(body);scroll-offsets:selector(#cards) start 1,selector(#cards) start 0;start:selector(#cards) start 1;end:selector(#cards) start 0;time-range:4s}.card{--index0:calc(var(--index) - 1);--reverse-index:calc(var(--numcards) - var(--index0));--reverse-index0:calc(var(--reverse-index) - 1)}.card__content{transform-origin:50% 0;will-change:transform;--duration:calc(var(--reverse-index0) * 1s);--delay:calc(var(--index0) * 1s);animation:var(--duration) linear scale var(--delay) forwards;animation-timeline:cards-element-scrolls-in-body}@keyframes scale{to{transform:scale(calc(1.1 - calc(.1 * var(--reverse-index))))}}}