@layer components {
  .card {
    
    --field-paper: var(--canvas);
    --field-line: var(--line-strong);

    padding: var(--space-5);
  }

  .card__title {
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }

  
  .card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .card--banner { padding: var(--space) var(--space-2) var(--space) var(--space-3); }

  @media (width <= 40rem) {
    .card { padding: var(--space-3); }
  }
}