/* Card — .card, .card__header, .card__body, .card__footer, .card--raised */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line-0);
  border-radius: var(--radius-3);
  padding: var(--space-5);
  color: var(--fg-0);
}
.card--raised {
  background: var(--bg-2);
  box-shadow: var(--shadow-2);
}
.card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.card__header > :is(h1,h2,h3,h4,h5,h6) { font-size: var(--size-3); }
.card__body > * + * { margin-block-start: var(--space-3); }
.card__footer {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line-0);
  display: flex;
  gap: var(--space-3);
}