/**
 * Main content area
 */
.bd-main {
  flex-grow: 1;
  flex-direction: column;
  display: flex;
  min-width: 0;

  .bd-content {
    display: flex;
    justify-content: center;
    height: 100%;

    .bd-article-container {
      justify-content: start;
      display: flex;
      flex-direction: column;

      // Max-width is slightly more than the W3 since our docs often have images.
      // We shoot for about 100 characters per line instead of 80.
      // ref: https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length
      width: 100%;
      max-width: 60em;
      overflow-x: auto; // Prevent wide content from pushing off the secondary sidebar
      padding: 1rem;

      .bd-article {
        // Give a bit more verticle spacing on wide screens
        @include media-breakpoint-up($breakpoint-sidebar-secondary) {
          padding-top: 1.5rem;
          padding-left: 2rem;
        }
      }
    }
  }
}
