.fd-doc-article {
  // content flow
  --flow-space: var(--spacing-05);

  h1:not(:first-of-type) {
    --flow-space: var(--spacing-09);
  }

  h2 {
    --flow-space: var(--spacing-09);
  }

  h3 {
    --flow-space: var(--spacing-07);
  }

  h4 {
    --flow-space: var(--spacing-06);
  }

  h5,
  h6 {
    --flow-space: var(--spacing-05);
  }

  hr {
    --flow-space: var(--spacing-09);
  }

  table {
    --flow-space: var(--spacing-07);
  }

  code {
    white-space: nowrap;
  }

  @media (min-width: 992px) {
    & > :not(pre):not(table):not(.fd-component-container):not(.fd-page-links):not(hr) {
      max-width: 42rem;
    }
  }
}

.fd-doc-layout-toc {
  padding: var(--spacing-05);

  .fd-toc {
    display: none;
  }
}

@media (min-width: 992px) {
  // Layout
  .fd-doc-layout {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    min-width: 0;
  }

  .fd-doc-layout-toc {
    padding: calc(var(--spacing-07) * 2);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 960px) 220px;
    grid-template-areas: "breadcrumb sticky-aside" "article sticky-aside";
    column-gap: calc(var(--spacing-07) * 2);
    grid-auto-rows: min-content;
    width: 100%;

    .fd-toc {
      display: block;
      position: sticky;
      top: 100px;

      span {
        display: inline-block;
        font-weight: 600;
        margin-bottom: calc(var(--text-04) / 4);
      }
    }

    .toc__nav {
      font-size: var(--text-02);

      ol {
        list-style: none;
        margin: 0;
        padding-left: var(--text-04);
      }

      a {
        display: inline-block;
        text-decoration: none;
        padding: calc(var(--text-04) / 4) 0;
        color: var(--gray-50-color);
      }
    }
  }

  .fd-sticky-aside {
    max-width: 350px;
    grid-area: sticky-aside;
  }
}