/* ========== Layout ========== */
/*
 * .exa-container        Page-width wrapper: 1200px content + 120px gutters (16px below 1024px), centered.
 * .exa-section-surface  The pale exa-1 rounded panel wrapping a section's content.
 * .exa-soft-card        White card surface for benefit / trait / stage cards.
 * Ports of ExaLife Container, SectionSurface and SoftCard. Components set box-sizing themselves
 * (ExaLife got it from the Tailwind reset), so they work in projects without a CSS reset.
 */

.exa-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--exa-container-max);
  margin-inline: auto;
  padding-inline: var(--exa-gutter);
}

@media (min-width: 1024px) {
  .exa-container {
    padding-inline: var(--exa-gutter-lg);
  }
}

.exa-section-surface {
  box-sizing: border-box;
  border-radius: var(--exa-radius-card);
  background-color: var(--exa-color-surface-soft);
  padding: var(--exa-space-20);
}

@media (min-width: 768px) {
  .exa-section-surface {
    padding: var(--exa-space-30);
  }
}

.exa-soft-card {
  box-sizing: border-box;
  border-radius: var(--exa-radius-card);
  background-color: var(--exa-color-surface);
  padding: var(--exa-space-20);
}