@layer sections {
  .sheet__section--examples { --footer-row: 25; }

  .examples__title    { grid-column: B / span 8; grid-row: 2 / span 2; }
  .examples__intro    { grid-column: B / span 8; grid-row: 4; }
  .examples__all      { grid-column: B / span 2; grid-row: 6; }
  .examples__count    { grid-column: D;          grid-row: 6; }
  .examples__cards    { grid-column: B / span 12; grid-row: 8; }

  /* Cards flow three to a row: three columns of content plus a gutter column, then
     eight rows (a five-row screenshot, the name, the tool and a spacer). */
  .examples__card {
    grid-column: span 4;
    grid-row: span 8;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;

    > * {
      grid-column: 1 / span 3;
    }
  }

  .examples__shot {
    grid-row: 1 / span 5;
    padding: 0;
  }

  .examples__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .examples__name  { grid-row: 6; }
  .examples__meta  { grid-row: 7; }

  .examples__name.cell--link {
    font-weight: 700;
  }
}

/* Phones: one card per row, full width. */
@layer sections {
  @media (width <= 600px) {
    .sheet__section--examples { --footer-row: 57; }

    .examples__title    { grid-column: A / span 4; grid-row: 1 / span 2; }
    .examples__intro    { grid-column: A / span 4; grid-row: 3 / span 2; }
    .examples__all      { grid-column: A / span 2; grid-row: 6; }
    .examples__count    { grid-column: C / span 2; grid-row: 6; }
    .examples__cards    { grid-column: A / span 4; }

    .examples__intro {
      font-size: 12px;
      white-space: normal;
      line-height: 1.3;
    }

    .examples__card > * {
      grid-column: 1 / span 4;
    }
  }
}