.tutorial-intro h1 {
  margin-top: var(--s-5);
}

.tutorial-intro .callout {
  max-width: var(--reading-width);
}

.tutorial-intro .callout a,
.tutorial-step .callout a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.tutorial-intro__facts {
  margin-top: var(--s-8);
}

.tutorial-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: var(--s-16);
  align-items: start;
}

.tutorial-step > * {
  min-width: 0;
}

.tutorial-step__index {
  color: var(--text-muted);
  font-size: var(--f-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-small);
}

.section--light .tutorial-step__index {
  color: var(--ink-muted);
}

.tutorial-step__copy > h2,
.tutorial-check .prose > h2 {
  margin-top: var(--s-4);
}

.tutorial-step .official-shot {
  margin-top: var(--s-12);
}

.tutorial-check {
  border-top: 1px solid var(--line-strong);
}

@media (max-width: 860px) {
  .tutorial-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  .tutorial-step .official-shot {
    margin-top: 0;
  }
}