body {
  background:
    radial-gradient(circle at 12% 6%, rgba(211, 154, 46, 0.12), transparent 26%),
    radial-gradient(circle at 92% 84%, rgba(199, 21, 27, 0.12), transparent 30%),
    var(--donna-black);
  color: var(--donna-paper);
}

.page,
.ds-container {
  width: min(var(--page-width), calc(100% - 32px));
  margin-inline: auto;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.ds-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-5);
  align-items: start;
}

.ds-surface {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(18, 10, 6, 0.92);
  border: 1px solid var(--donna-line);
  box-shadow: 0 18px 48px var(--donna-shadow);
}

@media (max-width: 820px) {
  .ds-two-column {
    grid-template-columns: 1fr;
  }
}