:root{--gray-0: #f8f9fa;--gray-8: #343a40;--indigo-6: #4c6ef5;--orange-6: #fd7e14;--size-4: 1.25rem;--radius-3: 1rem;--font-size-fluid-3: max(2rem, min(9vw, 3.5rem));--aspect-width: 4;--aspect-height: 3}body{background:var(--surface-1);min-height:200vh;overflow-x:hidden}:where(footer,header){height:50vh;min-height:600px;display:grid;place-items:center}:is(h1,h2){font-family:Impact,sans-serif;text-transform:uppercase;font-size:var(--font-size-fluid-3)}section:nth-of-type(odd){background:var(--surface-2);padding:var(--size-4);display:grid;place-items:center}section{min-height:60vh}section:nth-of-type(2){height:200vh;view-timeline-name:--flip-flap}.tiles{position:sticky;top:calc(50% - min(((var(--aspect-height) / var(--aspect-width)) * 40vw),50vh))}.tiles__row{display:flex;width:100vw}.tiles__row{--distance: -50%;animation:slide linear both;animation-timeline:--flip-flap;animation-range:entry 100% exit 0%}@keyframes slide{to{translate:var(--distance) 0}}.tiles__row:nth-of-type(2){--distance: 50%}.tiles__row:nth-of-type(3){--distance: -30%}.tiles__row:nth-of-type(4){--distance: 30%}.tiles__row:nth-of-type(2n){justify-content:end}img{width:20vw;aspect-ratio:var(--aspect-width) / var(--aspect-height);-o-object-fit:cover;object-fit:cover;max-height:25vh}.indicators{position:fixed;width:16vw;left:8vw;display:grid;top:50%;gap:2rem;transform:translateY(-50%);justify-items:center;opacity:0}.indicators:hover{opacity:1}.progress{height:2.5rem;width:100%;background:var(--gray-8);position:relative;border-radius:var(--radius-3);overflow:hidden}.progress__bar{background:var(--indigo-6);width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%}.progress:nth-of-type(2n) .progress__bar{background:var(--orange-6)}.progress__label{position:absolute;inset:0;text-align:center;font-weight:700;display:grid;place-items:center;font-size:1.25rem;color:var(--gray-0)}.progress--enter .progress__bar{animation:indicate both linear;animation-timeline:--flip-flap;animation-range:entry}.progress--exit .progress__bar{animation:indicate both linear;animation-timeline:--flip-flap;animation-range:exit}.progress--cover .progress__bar{animation:indicate both linear;animation-timeline:--flip-flap;animation-range:cover}.progress--contain .progress__bar{animation:indicate both linear;animation-timeline:--flip-flap;animation-range:contain}@keyframes indicate{to{transform:scaleX(1)}}