.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-group-gap);
  justify-content: center;
}

.card-container > .card {
  flex: 1 1 var(--card-min-width);
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: clip;
  border-radius: var(--card-border-radius);
  border-color: var(--card-border-color);
  border-style: var(--card-border-style);
  border-width: var(--card-border-width);
  background-color: var(--card-background-color);
}

.card-header {
  padding-inline: var(--card-header-padding-x);
  padding-block: var(--card-header-padding-y);
}

.card-body {
  flex: 1 1 auto;
  padding-inline: var(--card-body-padding-x);
  padding-block: var(--card-body-padding-y);
}

.card-footer {
  padding-inline: var(--card-footer-padding-x);
  padding-block: var(--card-footer-padding-y);
}

.card-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--content-on-primary);
}

.card-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--content-on-secondary);
}

.card-tertiary {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  color: var(--content-on-tertiary);
}

.card-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--content-on-success);
}

.card-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--content-on-info);
}

.card-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--content-on-warning);
}

.card-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--content-on-danger);
}

.card-neutral {
  background-color: var(--color-neutral);
  border-color: var(--color-neutral);
  color: var(--content-on-neutral);
}

.card-light {
  background-color: var(--color-light);
  border-color: var(--color-light);
  color: var(--content-on-light);
}

.card-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--content-on-dark);
}

.card-white {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--content-on-white);
}

.card-black {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--content-on-black);
}

.card-primary-ghost {
  background-color: var(--color-primary-ghost);
  border-color: var(--color-primary-ghost);
  color: var(--content-on-primary-ghost);
}

.card-secondary-ghost {
  background-color: var(--color-secondary-ghost);
  border-color: var(--color-secondary-ghost);
  color: var(--content-on-secondary-ghost);
}

.card-tertiary-ghost {
  background-color: var(--color-tertiary-ghost);
  border-color: var(--color-tertiary-ghost);
  color: var(--content-on-tertiary-ghost);
}

.card-success-ghost {
  background-color: var(--color-success-ghost);
  border-color: var(--color-success-ghost);
  color: var(--content-on-success-ghost);
}

.card-info-ghost {
  background-color: var(--color-info-ghost);
  border-color: var(--color-info-ghost);
  color: var(--content-on-info-ghost);
}

.card-warning-ghost {
  background-color: var(--color-warning-ghost);
  border-color: var(--color-warning-ghost);
  color: var(--content-on-warning-ghost);
}

.card-danger-ghost {
  background-color: var(--color-danger-ghost);
  border-color: var(--color-danger-ghost);
  color: var(--content-on-danger-ghost);
}

.card-neutral-ghost {
  background-color: var(--color-neutral-ghost);
  border-color: var(--color-neutral-ghost);
  color: var(--content-on-neutral-ghost);
}

.card-light-ghost {
  background-color: var(--color-light-ghost);
  border-color: var(--color-light-ghost);
  color: var(--content-on-light-ghost);
}

.card-dark-ghost {
  background-color: var(--color-dark-ghost);
  border-color: var(--color-dark-ghost);
  color: var(--content-on-dark-ghost);
}

.card-white-ghost {
  background-color: var(--color-white-ghost);
  border-color: var(--color-white-ghost);
  color: var(--content-on-white-ghost);
}

.card-black-ghost {
  background-color: var(--color-black-ghost);
  border-color: var(--color-black-ghost);
  color: var(--content-on-black-ghost);
}