section {
	width: 40rem;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	gap: var(--size-4);
}

section p {
	padding: 0 var(--size-6);
}



h1 {
	font-size: var(--font-size-fluid-3);
}

.photo-block {
  position: sticky;
  top: calc(50% - 30vh);
  height: 60vh;
	width: 100%;
	display: grid;
  overflow: hidden;
  background: var(--gray-6);
}

.photo-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(38deg);
  display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.photo {
  aspect-ratio: 3 / 4;
  width: 20vmax;
}

.collage {
  height: 200vh;
  view-timeline: --collage;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo:nth-of-type(7n + 1):nth-of-type(even),
.photo:nth-of-type(7n + 3):nth-of-type(even),
.photo:nth-of-type(7n + 5):nth-of-type(even),
.photo:nth-of-type(7n + 7):nth-of-type(even) {
  --vertical: -100%;
  --horizontal: 100%;
}
.photo:nth-of-type(7n + 1):nth-of-type(odd),
.photo:nth-of-type(7n + 3):nth-of-type(odd),
.photo:nth-of-type(7n + 5):nth-of-type(odd),
.photo:nth-of-type(7n + 7):nth-of-type(odd) {
  --vertical: -100%;
  --horizontal: -100%;
}

.photo:nth-of-type(7n + 2):nth-of-type(even),
.photo:nth-of-type(7n + 4):nth-of-type(even),
.photo:nth-of-type(7n + 6):nth-of-type(even) {
  --vertical: 100%;
  --horizontal: -100%;
}

.photo:nth-of-type(7n + 2):nth-of-type(odd),
.photo:nth-of-type(7n + 4):nth-of-type(odd),
.photo:nth-of-type(7n + 6):nth-of-type(odd) {
  --vertical: 100%;
  --horizontal: 100%;
}

.photo {
  animation-name: travel;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-timeline: --collage;
  animation-range: entry 100% exit 0%;
}

@keyframes travel {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 var(--vertical);
  }
  100% {
    translate: var(--horizontal) var(--vertical);
  }
}