@layer components {
  .card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--card-shadow);
  }

  .card--list { gap: 0; padding: 0; overflow: hidden; }
  .card__title { font-size: var(--text-sm); font-weight: 600; }
  .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .card--list > .card__head { min-height: 52px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); }
  .card__link { color: inherit; text-decoration: none; }
  .card__aside { margin-left: auto; font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .card--list > .card__title { padding: var(--space-4) var(--space-4) var(--space-2); }
}