@property --num{syntax:"<integer>";initial-value:1;inherits:false}@property --progress{syntax:"<percentage>";initial-value:0%;inherits:true}.steps__module .step-counter{animation:counter linear both;counter-reset:num var(--num);height:100%;left:50%;position:absolute;top:0;width:1px;animation-timeline:view();animation-range:entry var(--animation-range-start) entry-crossing var(--animation-range-end);--progress:0%}.steps__module .step-counter:after{--width:6rem;align-items:center;background-image:radial-gradient(circle,#fff 0,#fff 65%,hsla(0,0%,100%,0) 65%,hsla(0,0%,100%,0) 100%),conic-gradient(var(--primary) 0,var(--primary) var(--progress),#fff var(--progress),#fff 100%);border-radius:100%;content:counter(num);display:flex;font:800 3rem system-ui;height:var(--width);justify-content:center;left:calc(50% - var(--width)/2);margin-left:calc(var(--width)/-2);margin-top:calc(var(--width)/-2);position:sticky;top:calc(50% - var(--width)/2);width:var(--width);z-index:100}.steps__module{--animation-range-start:-50%;--animation-range-end:100%;counter-reset:steps;position:relative;view-timeline:--steps block}.steps__module .step{display:contents}.steps__module .step h2:after{content:counter(steps);counter-increment:steps}.steps__module .step-content{grid-column:one-two;height:100vh}.steps__module .step-content .content{padding:1rem;position:sticky;top:1rem}.steps__module .step-image{grid-column:two-two;grid-row:1/4}.steps__module .step-image .image{height:100vh}.steps__module .step-image img{animation-fill-mode:both;animation-timing-function:linear;height:100vh;object-fit:cover;position:sticky;top:0;animation-timeline:--steps;animation-range:entry-crossing 0 entry-crossing var(--animation-range-end);opacity:1;z-index:1}.steps__module .step:nth-of-type(2) .step-image img{animation-name:reveal2;opacity:0;z-index:2}.steps__module .step:nth-of-type(3) .step-image img{animation-name:reveal3;opacity:0;z-index:3}@keyframes reveal2{33%{clip-path:inset(0 0 0 100%);opacity:0}66%{clip-path:inset(0 0 0 0);opacity:1}to{opacity:0}}@keyframes reveal3{66%{clip-path:inset(0 0 0 100%);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}@keyframes counter{0%{--num:0;--progress:0%}to{--num:3;--progress:100%}}@media (max-width:800px){.steps__module .step{display:grid;grid-column:page}.steps__module .step .step-content,.steps__module .step .step-image{grid-column:1;grid-row:1}.steps__module .step .step-image{position:relative;z-index:0}.steps__module .step .step-content{position:relative;z-index:1}.steps__module .step .step-content .content{backdrop-filter:blur(3px);background:var(--overlay);border-radius:1rem;margin:1rem;padding:2rem}}