.page-header {
  font-family: var(--font-family-monospace);
  grid-column: main-start / main-end;
  margin-block: var(--space-xl) var(--space-l);

  /* margin-block-start is set by the grid */
  &:first-child,
  .page-header__title:first-child
  {
    margin-block-start: 0;
  }

  :last-child {
    margin-block-end: 0;
  }

  .page-header__title {
    font-family: var(--font-family-monospace);
    font-size: var(--text-xxl);
    line-height: 1.2;
    margin-block: var(--space-xs);

    &:only-child {
      margin-block-end: 0;
    }
  }

  .page-header__subtitle {
    color: var(--text-color-secondary);
    font-size: var(--text-m);
  }

  .page-date {
    display: block;
    font-family: var(--font-family-body);
    font-size: var(--text-s);
    margin-block: var(--space-paragraph) 0;
  }
}