@layer components {
  .card {
    background: var(--color-canvas);
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .card--shadow {
    box-shadow: var(--shadow);
  }

  .card__header {
    background-color: var(--color-ink-lightest);
    border-block-end: var(--border);
    padding: var(--block-space-half) var(--inline-space);
    font-weight: 600;
  }

  .card__body {
    padding: var(--block-space) var(--inline-space);
  }

  .card__footer {
    border-block-start: var(--border);
    padding: var(--block-space-half) var(--inline-space);
  }
}