@layer components {
  :where(.card) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
  }

  .card__title {
    font-size: 1rem;
  }
}