.process__head { max-width: 40ch; margin-bottom: clamp(2rem, 5vw, 3rem); }
.process__head .eyebrow { color: var(--glow); margin-bottom: 0.75rem; }

.process__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  counter-reset: step;
}
.process__step { display: flex; flex-direction: column; gap: 1rem; }

.process__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(90% 80% at 50% 100%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 65%),
    var(--color-surface);
  display: grid;
  place-items: center;
}
.process__img { width: 100%; height: 100%; object-fit: cover; }
.process__num {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: color-mix(in srgb, var(--glow) 60%, var(--color-text-muted));
}

.process__index { color: var(--glow); display: block; margin-bottom: 0.35rem; }
.process__body h3 { margin-bottom: 0.35rem; }
.process__body p { font-size: 0.9rem; }

@media (max-width: 900px) {
  .process__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .process__track::-webkit-scrollbar { display: none; }
  .process__step { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .process__track { grid-auto-columns: 82%; }
}