Article Layout Simple

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

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

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

    align-self: center;
    max-width: 45rem;
  }

  //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 7rem 50rem 7rem 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,
      .centered-content-75,
      .zigzag {
        grid-column: 3 / 4;
      }
      // Centered elements that are a bit wider than the textwurst
      figure,
      .two-column-image-divider-asymmetric,
      .case-list-teaser,
      .topic-teaser {
        grid-column: 2 / 5;
      }
    }
  }
}