Article Layout

%article-layout {
  display: flex;
  flex-direction: column;
  padding: 0 $spacer-sm $spacer-base $spacer-sm;

  > * + * {
    margin-top: $spacer-base;
  }

  super-quote,
  long-quote,
  pull-quote {
    @extend %container-vertical-spacing-lg;

    align-self: center;
  }

  //Wrapper for contant that should not stretch
  .centered-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .centered-content-75 {
    display: flex;
    align-self: center;
    justify-self: center;
    width: 75%;
  }

  // Breakpoints
  @media screen and (min-width: $grid-breakpoint-md) {
    padding-right: $spacer-xxl;
    padding-left: $spacer-xxl;
  }

  @supports (display: grid) {
    @media screen and (min-width: $grid-breakpoint-lg-xl) {
      display: grid;
      grid-template-columns: 1fr 11rem 5rem 2rem 50rem 2rem 5rem 11rem 1fr; //magic numbers
      grid-template-rows: auto;

      padding-right: $spacer-sm;
      padding-left: $spacer-sm;

      // Centered textwurst items
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol,
      check-list,
      bold-list,
      table,
      blockquote,
      super-quote,
      long-quote,
      pull-quote,
      info-box,
      pre,
      code,
      wall-of-consent,
      hr,
      .author-bio,
      .author-section,
      .footnote-section,
      .footnotes,
      .centered-content,
      .zigzag,
      .centered-content-75,
      figure,
      .two-column-image-divider-asymmetric,
      .case-list-teaser {
        grid-column: 5 / 6;
      }

      // Left aligned elements
      .toc {
        grid-column: 2 / 4;
        grid-row: 2 / 100;
        align-self: start;
      }

      // Right aligned elements
      .info-note {
        grid-column: 7 / 9;
        grid-row: 2/ 100;
        align-self: start;
      }
    }
  }
}