.card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  height: 100%;
  border-radius: var(--radius-panel);
  background-color: var(--color-panel);
}

/* The footer is pinned to the bottom of the card. Its text lines up with the text of the rows above
   because the button inside it carries that inset (ui/Button.module.css, --row-inset) — this rule
   only holds the bottom padding. */
.footer {
  padding-bottom: var(--panel-padding);
}