.surface {
  background: var(--surface);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}

.surface--flush {
  border-radius: var(--surface-radius) var(--surface-radius) 0 0;
}

.surface--centered {
  width: min(var(--surface-width, 40rem), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
}

.surface--wide {
  --surface-width: 56rem;
}

.surface__body,
.settings {
  padding: var(--space-lg);
}

@media (min-width: 768px) {
  .surface__body,
  .settings {
    padding: var(--space-xl);
  }
}