:root{--card-height:40vw;--card-margin:4vw;--numcards:4;--outline-width:0px}main{width:80vw;margin:0 auto}#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-top-offset:120px}#card-2{--index:2;--card-top-offset:140px}#card-3{--index:3;--card-top-offset:160px}#card-4{--index:4;--card-top-offset:180px}.card{position:sticky;top:0;padding-top: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:#fff;color:#131212;border-radius:2rem;overflow:hidden;display:grid;grid-template-areas:"text img";grid-template-columns:1fr 1fr;align-items:stretch;padding:1.4em;min-height:600px}.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}h1{font-weight:300;font-size:3rem;margin-bottom:1rem}h1,h2{font-family:Cormorant Garamond,serif}h2{font-weight:700;font-size:2.5rem;margin:0}p{font-weight:300;line-height:1.42;font-size:1.1rem}@media (min-width:769px){@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))))}}}}@media (max-width:768px){:root{--card-height:auto;--card-margin:1.5rem}#cards{grid-template-rows:auto;padding-bottom:0}.card{position:static;padding-top:0}#card-1{padding-top:30px}.card-content{grid-template-areas:"text" "img";grid-template-columns:1fr;min-height:auto;padding:1rem;text-align:center}.card-content>div{width:100%;place-items:center;text-align:center}.card-content>figure{border-radius:1em;overflow:hidden;margin-top:30px}.card-content>figure>img{width:100%;height:100%;object-fit:cover}.card__content{animation:none!important;transform:none!important}h1{font-size:2rem}h2{font-size:1.5rem}p{font-size:1rem}}