/* Blueprint 08: heading 20 px / 500 plus one sentence, with a rule above. */

.list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s8);
}

.row {
  border-top: var(--hairline) solid var(--rule);
  padding-block: var(--s5);
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: var(--s4);
  align-items: baseline;
}

.index {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

.heading {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 var(--s2);
}

.body {
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
}

.ink .row {
  border-top-color: var(--rule-dark);
}

.ink .body {
  color: var(--mat);
}

@media (max-width: 767px) {
  .list {
    grid-template-columns: minmax(0, 1fr);
  }

  .row {
    padding-block: var(--s4);
  }
}