/* Grid-based layout
------------------------------------------------------------------------------*/

.article-grid-container {
  max-width: 720px;

  @include breakpoint(xl) {
    max-width: none;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(500px, 720px) minmax(220px, 1fr);
    grid-template-areas:
      "top right-sidebar"
      "bottom right-sidebar";
    column-gap: $spacer-6;
  }

  @include breakpoint(xl) {
    column-gap: $spacer-9;
  }
}

.article-grid-toc {
  grid-area: right-sidebar;
}

.article-grid-toc-content {
  @include breakpoint(xl) {
    position: sticky;
    top: $spacer-4;
    max-height: calc(100vh - #{$spacer-4});
    overflow-y: auto;
    padding-bottom: $spacer-4;
  }
}

.article-grid-head {
  grid-area: top;
}

.article-grid-body {
  grid-area: bottom;
}