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

.tutorial-opening h1 {
  margin-top: 28px;
}

.tutorial-intro {
  max-width: 48em;
  color: var(--c-muted);
}

.tutorial-opening > .callout {
  margin-top: 36px;
  margin-bottom: 32px;
}

.tutorial-step-heading {
  max-width: 48em;
  margin-bottom: 40px;
}

.tutorial-step-number {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--f-mono);
  font-size: var(--fs-tiny);
  color: var(--c-muted);
}

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

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

.tutorial-step-grid > .prose > h3:first-child,
.tutorial-page .split-grid > .prose > h3:first-child {
  margin-top: 0;
}

.tutorial-page .panel-section .callout {
  background: var(--c-white);
}

.tutorial-device-note {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 56px;
  align-items: center;
}

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

.tutorial-device-note .get-actions {
  margin-top: 0;
}

.tutorial-device-note p:last-child {
  margin-bottom: 0;
}

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

  .tutorial-device-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

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

  .tutorial-step-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

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

  .tutorial-opening .callout {
    padding-inline: 20px;
  }
}