.card,
.u-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--s-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  background: var(--c-surface);
}

@media (min-width: 1024px) {
  .card,
  .u-card {
    padding: var(--s-5);
  }
}