body {
  margin: 0;
  /* Every full-bleed component (Hero Banner, CTA Banner, Maintenance
     Alert, etc.) escapes its container with `width: 100vw` + negative
     margins. `100vw` includes the vertical scrollbar's width, but the
     container it's escaping from doesn't, so each one overshoots the
     true viewport edge by the scrollbar's width and drags in a
     horizontal scrollbar - this clips that harmless sliver of overshoot
     instead of letting it force horizontal scroll. */
  overflow-x: hidden;
  font-family: var(--font-family-base);
}

p {
  line-height: 150%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 125%;
}

img {
  max-width: 100%;
  height: auto;
}

.content-wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.container {
  box-sizing: border-box;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.layout-content .field--name-field-paragraphs > .field__item + .field__item {
  margin-top: var(--space-10);
}

/*
 * Two adjacent top-level Rich Text paragraphs (no Group wrapper) should
 * read as one continuous body of text, so use Group's tighter spacing
 * between them instead of the standard 80px top-level gap - see
 * STYLE_GUIDE.md, Spacing section.
 */
.layout-content .field--name-field-paragraphs > .field__item:has(> .rich-text) + .field__item:has(> .rich-text) {
  margin-top: var(--space-5);
}

.page-template__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.page-template__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .page-template__layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .page-template__sidebar {
    flex: 0 0 280px;
  }

  .page-template__main {
    flex: 1;
    min-width: 0;
  }
}