@layer components {
  .card {
    --card-shadow: var(--bevel-sm);
    --card-head-bg: none;
    --card-head-color: var(--color-text);
    --card-head-subtitle-color: var(--color-text-muted);
    --card-head-divider: 1px solid var(--color-border);
    --card-head-align: baseline;
    --card-head-padding-y: 0.875rem;
    --card-padding: 1.25rem;

    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    box-shadow: var(--card-shadow);
  }

  .card--raised {
    --card-shadow: var(--bevel);
    --card-head-bg: var(--gradient-header);
    --card-padding: 1.5rem;
  }

  .card--banner {
    --card-shadow: var(--bevel);
    --card-head-bg: var(--color-blue-600);
    --card-head-color: var(--color-white);
    --card-head-subtitle-color: var(--color-blue-100);
    --card-head-divider: none;
    --card-head-align: center;
    --card-head-padding-y: 1rem;
    --card-padding: 1.5rem;
  }

  .card--banner-indigo {
    --card-head-bg: var(--color-indigo-600);
    --card-head-subtitle-color: var(--color-indigo-100);
  }

  .card--banner-danger {
    --card-head-bg: var(--color-red-600);
    --card-head-subtitle-color: var(--color-red-100);
  }

  .card--banner-success {
    --card-head-bg: var(--color-green-600);
    --card-head-subtitle-color: var(--color-green-100);
  }

  .card__head {
    display: flex;
    align-items: var(--card-head-align);
    justify-content: space-between;
    gap: 1rem;
    padding: var(--card-head-padding-y) var(--card-padding);
    border-bottom: var(--card-head-divider);
    background: var(--card-head-bg);
    color: var(--card-head-color);
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);

    & > * {
      min-width: 0;
    }
  }

  .card__heading {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .card__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: break-word;
  }

  .card__title--lg {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
  }

  .card__subtitle {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--card-head-subtitle-color);
    white-space: pre-line;
    overflow-wrap: break-word;
  }

  .card__body {
    padding: var(--card-padding);
  }

  .card__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem var(--card-padding);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-muted);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
  }
}