.tutorial-opening {
  padding-bottom: 64px;
}

.tutorial-deck {
  max-width: 40em;
}

.tutorial-opening .callout {
  max-width: 88ch;
}

.tutorial-body {
  padding-bottom: var(--section-space);
}

.tutorial-step {
  padding-top: 64px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 104px;
}

.tutorial-step + .tutorial-step {
  padding-top: var(--section-space);
}

.tutorial-step-heading {
  max-width: 76ch;
  margin-bottom: 48px;
}

.tutorial-step-heading .meta {
  margin-bottom: 20px;
}

.tutorial-step-heading .lead {
  margin-bottom: 0;
}

.tutorial-step-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

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

.tutorial-copy {
  min-width: 0;
  line-height: var(--leading-reading);
}

.tutorial-copy h3 {
  margin-top: 36px;
}

.tutorial-copy h3:first-child {
  margin-top: 0;
}

.tutorial-step-layout .official-shot {
  position: sticky;
  top: 112px;
}

.tutorial-verification p {
  line-height: var(--leading-reading);
}

.tutorial-check-note {
  max-width: 76ch;
  margin-top: 32px;
}

.tutorial-check-note p {
  margin-bottom: 0;
}

.tutorial-finish {
  max-width: 80ch;
  padding-top: var(--section-space);
}

.tutorial-finish .actions {
  margin-top: 32px;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .tutorial-step-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .tutorial-step-layout .official-shot {
    position: static;
  }
}

@media (max-width: 640px) {
  .tutorial-opening {
    padding-top: 64px;
  }

  .tutorial-step-heading {
    margin-bottom: 32px;
  }

  .tutorial-step {
    scroll-margin-top: 100px;
  }
}