/*
 * Card: a surface with rounded corners and a thin border.
 * The border carries the edge in both schemes; the surface is only a tint.
 */

.card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
}

.card > :first-child {
  margin-block-start: 0;
}

.card > :last-child {
  margin-block-end: 0;
}