@layer components {
  .card {
    @apply flex flex-col relative overflow-hidden h-auto box-border;
    @apply bg-content text-content-foreground outline-none shadow-medium;
    @apply rounded-xl transition-transform-background motion-reduce:transition-none;
  }

  .card-header {
    @apply p-3 w-full justify-start items-center shrink-0 subpixel-antialiased;
    @apply rounded-t-xl flex gap-3;
  }

  .card-body {
    @apply relative flex w-full p-3 flex-auto flex-col h-auto break-words text-left;
    @apply overflow-y-auto subpixel-antialiased;
  }

  .card-footer {
    @apply p-3 h-auto flex w-full items-center overflow-hidden;
    @apply subpixel-antialiased rounded-b-xl;
  }

  .card-footer--blurred {
    @apply subpixel-antialiased backdrop-blur backdrop-saturate-150;
  }
}