.s-page .page-header > *:first-child {
  margin-top: 0;
}

.s-page .page-header > *:last-child {
  margin-bottom: 0;
}

.s-page .page-content {
  display: grid;
  grid-template-columns: [full-start content-start] minmax(auto, 70ch) [content-end] auto [full-end];
  grid-auto-rows: min-content;
}

.s-page .page-content > * {
  grid-column: content;
  margin-bottom: 0;
}

.s-page .page-content > figure {
  grid-column: full;
}

.s-page .page-content > * + * {
  margin-top: 1em;
}

.s-page .page-content > * + h1,
.s-page .page-content > * + h2,
.s-page .page-content > * + h3,
.s-page .page-content > * + h4,
.s-page .page-content > * + h5,
.s-page .page-content > * + h6 {
  margin-top: 1.5em;
}

.s-page .page-content ul {
  @media screen and (min-width: 83em) {
    padding-left: 0;
  }
}

.s-page .page-content ul ul {
  padding-left: 1.5rem;
}

.s-page .page-header > *:first-child {
  margin-top: 0;
}

.s-page .page-header > *:last-child {
  margin-bottom: 0;
}

.s-page .page-content {
  display: grid;
  grid-template-columns: [full-start content-start] minmax(auto, 70ch) [content-end] 1fr [full-end];
  grid-auto-rows: min-content;
}

.s-page .page-content > * {
  grid-column: content;
  margin-bottom: 0;
}

.s-page .page-content > figure {
  grid-column: full;
}

.s-page .page-content > * + * {
  margin-top: 1em;
}

.s-page .page-content > * + h1,
.s-page .page-content > * + h2,
.s-page .page-content > * + h3,
.s-page .page-content > * + h4,
.s-page .page-content > * + h5,
.s-page .page-content > * + h6 {
  margin-top: 1.5em;
}

.s-page .page-content ul {
  @media screen and (min-width: 83em) {
    padding-left: 0;
  }
}

.s-page .page-content ul ul {
  padding-left: 1.5rem;
}

Fix Page grid so text fills viewport on mobile
Fix Page grid so text fills viewport on mobile

Instead of `auto` for the empty column, use `1fr` to ensure it shrinks
to nothing on smaller screens and prevents the text from wrapping
unnecessarily
