/* SPDX-License-Identifier: MIT
 *
 * card-grid.css - SL_05D Parts D and E (templates/components/card_grid.html), after hire4real's
 * five-card grid: the same geometry, the card surface and a hairline, the words in ink. No card
 * is tinted by what it says, and nothing here numbers a card. Tokens only.
 */
.card-grid { margin: 2.5rem 0 1rem; }
.card-grid__title { font-size: 1.25rem; margin: 0 0 0.35rem; }
.card-grid__intro { color: var(--ink-2); margin: 0 0 1rem; max-width: 72ch; }
.card-grid__cards {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.grid-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.grid-card__heading { font-size: 1rem; line-height: 1.35; margin: 0; color: var(--ink); }
.grid-card__heading a { color: inherit; }
.grid-card__body { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }
.grid-card__link { color: inherit; text-decoration: underline; text-underline-offset: 2px;
                   display: inline-block; min-height: 24px; padding: 2px 0; }
.grid-card__foot { min-height: 32px; }