@media screen and (max-width: 1023px) {
  aside.toc.sidebar {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  main {
    flex: auto;
    /* min-width: 0 required for flexbox to constrain overflowing elements */
    min-width: 0;
  }

  main > .content {
    display: flex;
  }

  aside.toc.embedded {
    display: none;
  }

  aside.toc.sidebar {
    flex: 0 0 var(--toc-width);
  }
}

@media screen and (min-width: 1216px) {
  aside.toc.sidebar {
    flex-basis: var(--toc-width--widescreen);
  }
}