.left-area {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-column-start: 1;

  @include breakpoint(sm) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  .text {
    margin-top: $margin-normal;

    @include breakpoint(sm) {
      @include font-size(24);
    }
  }
}

.article-date {
  margin-right: $margin-double;
}

.right-area {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-column-start: 1;

  @include breakpoint(sm) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-column-start: 2;
  }
}

.article-image {
  margin-bottom: $margin-half;
}

.article-light-text {
  color: $color-grey;
}

.footer-area {
  border-top: 1px solid $color-blue-300;
  padding: $margin-double 0;
  -ms-grid-column-span: 2;
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-columns: 1fr;
  grid-column-start: 1;

  @include breakpoint(sm) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-row-start: 2;
    grid-column-end: 3;
    display: flex;
  }
}

.author {
  @extend %flexbox-row;
  align-items: end;

  .image-round {
    margin-right: $margin-double;
  }
}

.footer-left {
  margin-bottom: $margin-double;

  @include breakpoint(sm) {
    margin-bottom: 0;
  }
}

.footer-right {
  @include breakpoint(sm) {
    text-align: right;
    margin-left: auto;
  }

  .pictogram {
    width: 2em;
    height: 2em;
  }
}

.article-two-column {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto $margin-normal auto $margin-normal auto;
  grid-gap: $margin-double 0;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;

  @include breakpoint(sm) {
    -ms-grid-columns: 1fr $margin-quadruple 1fr;
    -ms-grid-rows: 1fr $margin-double auto;
    grid-gap: $margin-double $margin-quadruple;
    grid-template-columns: 1fr 1fr;
  }
}