@supports (display: grid) {
  main header {
    margin: 0 0 3rem 0;
  }
  .post {
    margin: 0;
  }
  .post article header, .full {
    --grid-name: full;
    grid-column: full;
  }
  .post article header h1, .post article header aside {
    width: 50%;
    padding-right: 3rem;
  }

  .post .toc {
    grid-column: main;
  }
  .post .toc nav {
    max-width: calc(100vw - 3rem);
  }
  .post article, .post figure {
    display: grid;
    padding: 0;
    grid-template-columns: [full-start big-start] 3rem  [main-start] calc(100vw - 6rem) [main-end gutter-start] 2.5rem [gutter-end big-end sidebar-start] 100vw [sidebar-end full-end];
    grid-column-gap: 0;
    grid-auto-rows: min-content;
  }
  .post article > * {
    --grid-name:main;
    grid-column: main;
  }
  .post figure {
    --grid-name:main;
    grid-column: full;
  }
  .post figure img {
    max-width: 100%;
    grid-column: big;
  }
  .post figure > *  {
    --grid-name:main;
    grid-column: main;
  }
  .post figure figcaption  {
    margin: 1rem;
  }

  .post figure img+figcaption  {
    margin: 0;
    padding-left: 1rem;
    padding-top: 1rem;
    grid-column: sidebar;
    text-align: left;
    border-left: 0.5rem solid #e3e3e3;
  }
  .post .sidebar {
    --grid-name:sidebar;
    grid-column: sidebar;
    top: 0;
  }
  .sidebar {
    position: relative;
  }
  .post .sidebar {
    height: 1px;
    padding: 0;
    overflow: visible;
  }
}


@media (max-width: 750px) {

  @supports (display: grid) {
    .post .toc nav {
      max-width: calc(100vw - 2rem);
    }
    .post header {
      padding: 2rem;
    }
    .post article, .post figure {
      display: grid;
      padding: 0;
      grid-template-columns: [full-start big-start] 1rem  [main-start] calc(100vw - 2.5rem) [main-end gutter-start] 1rem [gutter-end big-end sidebar-start] 100vw [sidebar-end full-end];
      grid-column-gap: 0;
      grid-auto-rows: min-content;
    }
  }
}

@media (min-width: 1200px) {

  @supports (display: grid) {
    main, body > header {
      margin: 3rem;
    }
    .post article header h1, .post article header aside {
      width: 75%;
      padding-right: 2rem;
    }
    .post .toc nav {
      max-width: calc(100vw - 2rem);
    }
    .post figure figcaption  {
      margin-left: 0;
      padding-left: 1rem;
      grid-column: sidebar;
      text-align: left;
      border-left: 0.5rem solid #e3e3e3;
    }
    .post header {
      padding: 3rem;
    }
    .post article, .post figure {
      display: grid;
      padding: 0;
      grid-template-columns: [full-start big-start] 3rem  [main-start] 50vw [main-end gutter-start] 3rem [gutter-end big-end sidebar-start] calc(50vw - 6rem) [sidebar-end full-end];
      grid-column-gap: 0;
      grid-auto-rows: min-content;
    }
  }
}