@layer components {
  [data-name="card-sm"] {
    @apply flex-col-2 surface coloring-solid px-2 py-1 rounded;
  }

  [data-name="card-md"] {
    @apply flex-col-2 bg-surface text-on-surface px-4 py-2 rounded-md;
  }

  [data-name="card-lg"] {
    @apply flex-col-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
  }
}