/* Site-only layout: the landing page, the examples index and 404. Tokens only. */

.hero .display { max-width: 16ch; }
.hero .lede { max-width: var(--layout-measure); }
.hero .metrics { margin-top: var(--space-48); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-32);
}

.cards,
.pair {
  list-style: none;
  margin: var(--space-32) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-24);
}

.cards .card,
.pair .card { display: flex; flex-direction: column; }

.cards .card .overline + h2,
.pair .card .overline + h2 { margin-top: var(--space-4); }

.cards .card .lede,
.pair .card .lede { margin-top: var(--space-8); }

.cards .card .row,
.pair .card .row { padding-top: var(--space-16); }

.cards .card > .row:last-child,
.pair .card > .row:last-child { margin-top: auto; }

@media (min-width: 768px) {
  .cards,
  .pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1280px) {
  .cards { grid-template-columns: 1fr 1fr 1fr; }
}