.card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card--accent {
  border-block-start: 3px solid var(--color-accent);
}

.card--pad {
  padding: var(--space-5);
}

@media (min-width: 48rem) {
  .card--pad {
    padding: var(--space-8);
  }
}

.card__title {
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}