.blog-cards-list {
  @extend %flexbox-row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -#{$margin-card-xs / 2};
  position: relative;

  @include breakpoint(sm) {
    margin: 0 -#{$margin-card / 2};
  }

  &.popping-cards {
    .blog-card:nth-last-child(6),
    .blog-card:nth-last-child(5) {
      width: calc(#{percentage(1)} - #{$margin-normal});
      /* stylelint-disable max-nesting-depth  */
      .post-meta {
        .date {
          display: inline-block;
          padding-left: $margin-normal;
        }

        .author {
          display: flex;
          flex-grow: 1;
          justify-content: flex-end;

          img {
            margin: 0 0 0 $margin-normal;
          }

          .name {
            display: inline-block;
          }
        }
      }

      .preamble {
        display: block;
        font-weight: normal;
      }

      .author {
        display: none;
      }

      @include breakpoint(sm) {
        width: calc(#{percentage(1 / 2)} - #{$margin-normal});
      }
      /* stylelint-enable */
    }
  }

  .blog-card {
    margin: 0 $margin-quarter $margin-normal;
    width: calc(#{percentage(1 / 2)} - #{$margin-quarter} - #{$margin-half});

    @include breakpoint(sm) {
      margin: 0 $margin-half $margin-normal $margin-half;
      width: calc(#{percentage(1 / 2)} - #{$margin-normal});
    }

    @include breakpoint(lg) {
      width: calc(#{percentage(1 / 4)} - #{$margin-normal});
    }

    &:nth-child(2n+1) {
      margin-left: $margin-half;
    }
  }
}