.editor-info-page {
  --editor-info-page-index-width: 340px;
  --editor-info-page-index-gap: 60px;
  --editor-info-page-uniform-margin-vert: 2.4rem;
}

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

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

/*
  Only allow page header component to span max width.
*/
.editor-info-page:not(.has-page-index) .components > :not(.com-page-header) {
  max-width: min(var(--content-max-width), calc(100% - var(--mobile-content-edge-padding) * 2));
}

/*
  If page index component is included, set up a grid layout. Only enable page
  index and its accompanying styles when page is wide enough.
*/
@media (width <= 900px) {
  .com-page-index { display: none; }
  .editor-info-page.has-page-index .components > :not(.com-page-header) {
    max-width: min(var(--content-max-width), calc(100% - var(--mobile-content-edge-padding) * 2));
  }
}

@media (width > 900px) {

  .editor-info-page.has-page-index .components {
    display: grid;
    /* grid-template-columns: 360px 1fr; */
    grid-template-columns: 1fr  /* Left-side margin */
                           var(--editor-info-page-index-width)  /* Page index */
                           var(--editor-info-page-index-gap)  /* Page index gap */
                           calc(min(100%, var(--content-max-width)) - var(--editor-info-page-index-width) - var(--editor-info-page-index-gap))  /* Main content */
                           1fr;  /* Right-side margin */
  }

  /* Components that span full width. */
  .editor-info-page.has-page-index .components {
    .com-page-header, .com-custom-footer { grid-column: 1 / -1; }
    /* .com-page-header, .com-custom-footer, .com-contacts { grid-column: 1 / -1; } */
  }

  /* Page index components span the 2nd and 3rd column. */
  .editor-info-page.has-page-index .components .com-page-index {
    grid-column: 2 / span 1;
    grid-row: 2 / auto;
  }

  /* All other components span the 4th and 5th column. */
  .editor-info-page.has-page-index .components > * {
    grid-column: 4 / span 1;
  }

}


/*
  Custom component rules.
*/
.editor-info-page {
  .com-contacts {
    max-width: var(--content-max-width) !important;
    margin-inline: auto;
    .layout { grid-template-columns: 1fr; }
    /* .com-contacts-info { */
    /*   padding: 0; color: inherit !important; background: none; */
    /*   * { color: inherit !important; } */
    /* } */
  }
}