Article Layout

%article-layout {
  display: grid;
  grid-template-columns: $spacer-sm [content-start] 1fr [content-center-start] 3fr [content-center-end] 1fr [content-end] $spacer-sm; //magic numbers
  grid-template-rows: repeat(10, auto);
  padding-bottom: $spacer-base;

  .author-section {
    grid-column: content-start / content-end;
  }

  .content {
    display: flex;
    grid-column: content-start / content-end;
    flex-direction: column;
    row-gap: $spacer-base;
  }

  // Left aligned elements
  .toc {
    grid-column: content-start / content-end;
  }

  .cta-sidebar {
    grid-column: content-center-start / content-center-end;
    grid-row: -1;
  }

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

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

    justify-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%;
  }

  @media screen and (max-width: $grid-breakpoint-sm) {
    .cta-sidebar {
      grid-column: content-start / content-end;
      margin-top: $spacer-base;
    }
  }

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

  @media screen and (min-width: $grid-breakpoint-lg-xl) {
    // grid-template-columns: $spacer-sm [content-start] 1fr [content-center-start] 3fr [content-center-end] 1fr [content-end] $spacer-sm; //magic numbers
    grid-template-columns: 1fr 11rem 5rem 2rem [content-start] 10rem [content-center-start] 30rem [content-center-end] 10rem [content-end] 2rem 5rem 11rem 1fr;
    padding-right: $spacer-sm;
    padding-left: $spacer-sm;

    .author-section {
      grid-column: 5 / 6;
      grid-row: 1 / 2;
    }

    .content {
      grid-area: content;
      grid-row: 2 / 5;
    }

    // Left aligned elements
    .toc,
    .cta-sidebar {
      align-self: start;
      margin-top: $spacer-md;
      //display: flex;
      //flex-direction: column;
    }

    .toc {
      grid-column: 2 / 4;
      grid-row: 2 / 3;
    }

    .cta-sidebar {
      grid-column: 2 / 4;
      grid-row: 3 / 4;
      margin-top: $spacer-base;
    }

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