.article-layout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-padding), 1fr)
    [popout-start] minmax(0, var(--post-popout-width))
    [content-start] minmax(0, var(--page-max-width))
    [content-end] minmax(0, var(--post-popout-width))
    [popout-end] minmax(var(--page-padding), 1fr)
    [full-end];
  row-gap: 2rem;
  align-items: start;
}

.article-layout .post-header {
  grid-column: content-start / content-end;
  align-self: start;

  h1 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: var(--line-height-tight);
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
  }

  .post-meta {
    font-size: var(--font-size-sm);
    color: var(--color-ink-label);
    font-family: var(--font-family-mono);
  }
}

.article-layout .post-body {
  grid-column: full-start / full-end;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-padding), 1fr)
    [popout-start] minmax(0, var(--post-popout-width))
    [content-start] minmax(0, var(--page-max-width))
    [content-end] minmax(0, var(--post-popout-width))
    [popout-end] minmax(var(--page-padding), 1fr)
    [full-end];
}

@media (max-width: 720px) {
  .article-layout {
    grid-template-columns:
      [full-start] 0
      [popout-start] 0
      [content-start] minmax(0, 1fr)
      [content-end] 0
      [popout-end] 0
      [full-end];
  }

  .article-layout .post-header {
    grid-column: content-start / content-end;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }

  .article-layout .post-body {
    grid-template-columns:
      [full-start] 0
      [popout-start] 0
      [content-start] minmax(0, 1fr)
      [content-end] 0
      [popout-end] 0
      [full-end];
  }
}