@layer components {
  .card {
    border: 1px solid var(--base-200);
    background-color: white;
    border-radius: .25em;
    min-height: 15em;
    padding: 2em;


    header {
      > :first-child { margin-top: 0 }
      margin-bottom: 1em;
    }

    /* modifier classes */
    &.compact { padding: 1em }
  }
}