*, *::before, *::after {
box-sizing: border-box;
}

body {
overflow-x: clip; /* Clips horizontal overflow without creating a scroll container, preserving vertical scroll-timeline */
}

h1 {
    margin: 1em;
}

main {
    padding: 0;
}

.decoration {
    width: 100%;
    height: 100%;
}

article .decoration {
    width: auto;
    height: clamp(10em, 40vw, 15em);    display: block;
    margin: 0 auto;}

.invert {
    transform: rotate(180deg);
}

.card {
min-width: 320px;
max-width: 420px;
width: 100%;
box-sizing: border-box;
margin: 1em;
flex: 0 0 auto;
}

/* Grid layout for each section's cards */
section {
min-width: 100vw; /* Each section occupies at least the full viewport width in the flex row */
display: grid;
grid-template-rows: 1fr 1fr;
gap: 1em;
}

section div {
grid-row: 1 / 3;
grid-column: 1;
display: flex;
flex-direction: column;
}

section article:nth-child(odd) {
grid-row: 1;
}

section article:nth-child(even) {
grid-row: 2;
}

section article:nth-child(1) {
grid-column: 2;
}

section article:nth-child(2) {
grid-column: 3;
}

section article:nth-child(3) {
grid-column: 4;
}

section article:nth-child(4) {
grid-column: 5;
}

section article:nth-child(5) {
grid-column: 6;
}

section article:nth-child(6) {
grid-column: 7;
}

/* Horizontal scroll animation */
@keyframes move {
to {
transform: translateX(calc(-100% + 90vw));
}
}

#sectionPin {
height: 500vh;
overflow: visible;
view-timeline-name: --section-pin-tl;
view-timeline-axis: block;
}

.pin-wrap-sticky {
height: 100vh;
width: 100vw;
position: sticky;
top: 0;
overflow: hidden;
}

.pin-wrap {
height: 100vh;
width: max-content; /* Sizes to actual section content, so translateX(-100% + 100vw) lands exactly on the last section */
display: flex;
flex-direction: row;
will-change: transform;
animation: linear move forwards;
animation-timeline: --section-pin-tl;
animation-range: contain 0% contain 100%;
}