@layer sections {
  .sheet__section--how-it-works { --footer-row: 21; }

  .how-it-works__title             { grid-column: B / span 8; grid-row: 2 / span 2; }
  .how-it-works__steps             { grid-row: 5; }
  .how-it-works__number            { grid-column: B; }
  .how-it-works__step              { grid-column: C / span 2; }
  .how-it-works__detail            { grid-column: E / span 8; }
  .how-it-works__tracking-heading  { grid-column: B / span 5; grid-row: 15; }
  .how-it-works__tracking-label    { grid-column: B / span 2; }
  .how-it-works__tracking-link     { grid-column: D / span 3; }
  .how-it-works__tracking--code    { grid-row: 16; }
  .how-it-works__tracking--other   { grid-row: 17; }
  .how-it-works__tracking-note     { grid-column: B / span 5; grid-row: 18; }
  .how-it-works__repo-heading      { grid-column: H / span 5; grid-row: 15; }
  .how-it-works__repo              { grid-row: 16; }
  .how-it-works__repo-file         { grid-column: H / span 2; }
  .how-it-works__repo-note         { grid-column: J / span 3; }

  /* Each step takes two rows. */
  .how-it-works__number--step,
  .how-it-works__step--item,
  .how-it-works__detail--item {
    grid-row: span 2;
  }

  .how-it-works__number--step {
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--green);
  }

  .how-it-works__detail--item {
    font-size: 14px;
  }

  .how-it-works__repo-file {
    font: 13px var(--font-mono);
  }
}

/* Phones: each step's number runs down A beside its name and a three-row description.
   The tracking and repo tables stack underneath. */
@layer sections {
  @media (width <= 600px) {
    .sheet__section--how-it-works { --footer-row: 33; }

    .how-it-works__title             { grid-column: A / span 4; grid-row: 1 / span 2; }
    .how-it-works__steps             { grid-row: 4; }
    .how-it-works__number            { grid-column: A; }
    .how-it-works__step              { grid-column: B / span 3; }
    .how-it-works__detail            { grid-column: B / span 3; }
    .how-it-works__tracking-heading  { grid-column: A / span 4; grid-row: 22; }
    .how-it-works__tracking-label    { grid-column: A / span 2; }
    .how-it-works__tracking-link     { grid-column: C / span 2; }
    .how-it-works__tracking--code    { grid-row: 23; }
    .how-it-works__tracking--other   { grid-row: 24; }
    .how-it-works__tracking-note     { grid-column: A / span 4; grid-row: 25; }
    .how-it-works__repo-heading      { grid-column: A / span 4; grid-row: 27; }
    .how-it-works__repo              { grid-row: 28; }
    .how-it-works__repo-file         { grid-column: A / span 2; }
    .how-it-works__repo-note         { grid-column: C / span 2; }

    .how-it-works__number--step  { grid-row: span 4; }
    .how-it-works__step--item    { grid-row: auto; }
    .how-it-works__detail--item  { grid-row: span 3; font-size: 13px; }

    .how-it-works__detail.cell--table-header {
      display: none;
    }
  }
}