:root{--card-height:40vw;--card-margin:4vw;--card-top-offset:1em;--outline-width:1px;--numcards:1}.card{position:sticky;top:30%;padding-top:calc(var(--index) * var(--card-top-offset));transform-origin:top center;transition:transform .3s ease,opacity .3s ease;transform:scale(var(--scale));top:var(--top);z-index:var(--z-index)}.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}.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}p{font-weight:300;line-height:1.42;font-size:1.1rem}.card{--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(.1 * var(--reverse-index))))}}#cards{view-timeline-name:--cards-element-scrolls-in-body}.card{--start-range:calc(var(--index0) / var(--numcards) * 100%);--end-range:calc((var(--index)) / var(--numcards) * 100%);animation:scale linear forwards;animation-timeline:--cards-element-scrolls-in-body;animation-range:exit-crossing var(--start-range) exit-crossing var(--end-range)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.work-container:before{content:"";display:block;height:900px;width:150px;transform:translate(0);position:absolute;animation:rotate 5s linear infinite forwards;z-index:0;top:50%;transform-origin:top center}