:root{--card-gap: 25vh;--card-top-offset: 1.5em;--sticky-position: 0%;--outline-width: 0px;--card-height: 400px;--container-width: clamp(300px, 90vw, 1200px)}#cards{margin-bottom:15vh}#card_1{--index: 1}#card_2{--index: 2}#card_3{--index: 3}#card_4{--index: 4}.card{position:sticky;top:var(--sticky-position);padding-top:calc(var(--index) * var(--card-top-offset))}.card__content{transform-origin:50% 0%;will-change:transform;min-height:var(--card-height)}*{box-sizing:border-box;margin:0;padding:0}html{background:#000;color:#fff;font-size:10px}body{font-size:calc(1em + .5vw);font-family:JetBrains Mono,monospace;font-optical-sizing:auto;font-weight:100;font-style:normal;display:grid;gap:1em}body:before{--size: 45px;--line: rgb(255 255 255 / 15%);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) calc(var(--size) * .36) 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 0% calc(var(--size) * .32) / var(--size) var(--size);mask:linear-gradient(-20deg,transparent 10%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}h1,h2,h3{font-weight:900;text-transform:uppercase;text-wrap:balance;line-height:1}header,main{width:100%;max-width:var(--container-width);margin:0 auto;text-align:center}header{height:100vh;display:grid;place-items:center}#cards{list-style:none;outline:calc(var(--outline-width) * 10) solid hotpink;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(var(--numcards),var(--card-height));gap:var(--card-gap)}.card{outline:var(--outline-width) solid lime}.card__content{box-shadow:0 .2em 1em #0000001a,0 1em 2em #0000001a;background:#fff;color:#0a0507;border-radius:1em;overflow:hidden;display:grid;grid-template-rows:auto;align-items:end;outline:var(--outline-width) solid blue}.card__content>div{place-self:center;text-align:left;display:grid;gap:1em;place-items:start;width:100%;padding:5vh}.card__content>figure{overflow:hidden;box-shadow:inset 0 0 15px 5px #00000026;position:relative;height:200px}@media(min-width:800px){.card__content{grid-template-areas:"text img";grid-template-columns:1fr 1fr}.card__content>div{grid-area:text}.card__content>figure{grid-area:img;height:100%}}.card__content>figure>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}header h1{font-size:3.5em}main h1{font-size:2.5em}main h2{font-size:2.5em}main p{line-height:1.5}main .btn{background:#2e2e2e;color:#fff;text-decoration:none;display:inline-block;padding:.5em 1em;border-radius:.25em;font-size:.8em;font-weight:400}aside{width:100%;max-width:var(--container-width);margin:0 auto;text-align:left;display:grid;gap:2em;line-height:1.5;padding-bottom:5em}@supports (animation-timeline: view()){.card{--index0: calc(var(--index) - 1);--reverse-index: calc(var(--numcards) - var(--index0));--reverse-index0: calc(var(--reverse-index) - 1)}@keyframes scale-down{to{transform:scale(calc(1.1 - calc(.1 * var(--reverse-index))))}}@keyframes scale-up{0%{transform:scale(1)}to{transform:scale(calc(1.1 - calc(.1 * var(--reverse-index))))}}#cards{--numcards: 4;view-timeline-name:--cards-element-scrolls-in-body}.card__content{will-change:transform;--start-range: calc(var(--index0) / var(--numcards) * 100%);--end-range: calc((var(--index)) / var(--numcards) * 100%);animation:linear scale-down forwards;animation-timeline:--cards-element-scrolls-in-body;animation-range:exit-crossing var(--start-range) exit-crossing var(--end-range)}@keyframes stackedAnimation{0%{transform:scale(calc(1.1 - calc(.1 * var(--reverse-index))))}to{transform:scale(1)}}html[data-sticky-position=bottom] .card__content{animation:auto linear stackedAnimation both;animation-timeline:--cards-element-scrolls-in-body;animation-range:entry-crossing 0% contain 50%}}html[data-preset=middle] #cards{--cards-neg-offset: calc(var(--card-height) / -2);--cards-offset: calc(var(--card-height) / 2);transform:translateY(var(--cards-neg-offset));margin-top:var(--cards-offset);margin-bottom:calc(15vh + var(--cards-neg-offset))}html[data-debug=true] main{--outline-width: 1px}.warning{position:fixed;bottom:1rem;left:1rem;right:1rem;width:max-content;text-align:center;max-width:90vw;margin:auto;z-index:2;font-size:.8em;color:#333;background-color:#f6dcac;border:1px solid orange;padding:1rem 2rem;border-radius:3rem}@supports (animation-timeline: view()){.warning:not([data-bug]){display:none}}