.editor-home-page {
  --editor-home-page-uniform-margin-vert: 2.4rem;
}

.editor-home-page {
  margin: 0 auto;
  padding: 0 0 80px 0;
  /* Use uniform vertical margins between all components. */
  .com:not(.com-page-header) + .com {
    margin-top: var(--editor-home-page-uniform-margin-vert);
  }
}

/* Exception. Use natural heading margins instead of uniform margins. */
.site-main .editor-home-page .components .com-heading + .com {
  margin-top: 0;
}

/*
  Only allow full-bleed components (page header, library header) to span max width.
*/
.editor-home-page .com:not(.com-page-header):not(.com-library-header) {
  max-width: var(--content-max-width);
  margin-left: auto; margin-right: auto;
  padding-inline: var(--mobile-content-edge-padding);
}

.editor-home-page .split-container.reverse h2 {
  color: hsl(0 0% 100% / 1);
}

.editor-home-page .com-heading { text-align: center; }

.editor-home-page .com-page-header-subtitle {
  max-width: 1000px;
  line-height: 2.2rem;
}

/* Tighten the home-page subtitle leading on mobile. This needs equal
   specificity to the rule above (the component's generic mobile rule
   loses to `.editor-home-page .com-page-header-subtitle`). */
@media (width <= 800px) {
  .editor-home-page .com-page-header-subtitle {
    line-height: 1.25;
  }
}