/* Shared, compact introductions for the steps and full animation only. */
#stappen .section-heading,
#animatie .video-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 56px);
  row-gap: 16px;
  align-items: start;
  margin-bottom: clamp(28px, 3vw, 40px);
}

#stappen .section-heading > .eyebrow,
#animatie .video-heading > .eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  max-width: none;
  font-size: .72rem;
}

@media (max-width: 700px) {
  #stappen .section-heading > .eyebrow,
  #animatie .video-heading > .eyebrow {
    font-size: .65rem;
  }
}

#stappen .section-heading > h2,
#animatie .video-heading > h2 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

#stappen .section-heading > p:not(.eyebrow),
#animatie .video-heading > p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 2;
  max-width: 520px;
  margin: 0;
}

@media (max-width: 850px) {
  #stappen .section-heading,
  #animatie .video-heading {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 16px;
    margin-bottom: 28px;
  }

  #stappen .section-heading > p:not(.eyebrow),
  #animatie .video-heading > p:not(.eyebrow) {
    grid-column: 1;
    grid-row: 3;
    max-width: 640px;
  }
}