@layer components {
  .card {
    background-color: var(--color-surface);
    border-radius: var(--rounded-xl);
    border-width: var(--border);
    box-shadow: var(--shadow-sm);
    padding: var(--size-6);
  }

  .card-interactive {
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s var(--ease-2), border-color 0.2s var(--ease-2);
  }

  .card-interactive:hover {
    border-color: var(--color-border-dark);
    box-shadow: var(--shadow-md);
  }

  .card-compact {
    padding: var(--size-4);
  }

  @media (width >= 40rem) {
    .card-compact {
      padding: var(--size-6);
    }
  }
}