.l-promos {
  @extend .clearfix;
  overflow: hidden;
  position: relative;
}

.l-promos__heading {
  @extend %font-heading-medium;
  @include column(12);
  @include body(16, 24);
  color: $color-heading-extra-small;
  margin-top: $baseline-unit*6;
  margin-bottom: $baseline-unit*2;
}

.l-promos__item {
  @include column(12);
  margin-top: $baseline-unit*3;
  margin-bottom: $baseline-unit*3;
  min-height: 133px;

  @include respond-to($mq-s) {
    @include column(6);
  }

  @include respond-to($mq-l) {
    @include column(3);
  }
}

.l-promo__view-all {
  @extend %font-heading-medium;
  @include column(12);
  text-align: left;

  @include respond-to($mq-m) {
    position: absolute;
    left: 0;
    top: 38px;
    text-align: right;
  }
}

.l-promos {
  @extend .clearfix;
  overflow: hidden;
  position: relative;

  .flexbox & {
    display: flex;
    flex-flow: column;

    @include respond-to($mq-s) {
      flex-flow: row;
      flex-wrap: wrap;
    }
  }
}

.l-promos__heading {
  @extend %font-heading-medium;
  @include column(12);
  @include body(16, 24);
  color: $color-heading-extra-small;
  margin-top: $baseline-unit*6;
  margin-bottom: $baseline-unit*2;
}

.l-promos__item {
  @include column(12);
  margin-top: $baseline-unit*3;
  margin-bottom: $baseline-unit*3;
  min-height: 133px;

  @include respond-to($mq-s) {
    @include column(6);
  }

  @include respond-to($mq-l) {
    @include column(3);
  }

  .flexbox & {
    @include respond-to($mq-s) {
      flex-basis: 46%;
    }

    @include respond-to($mq-l) {;
      flex-basis: 21.55%;
    }
  }
}

.l-promo__view-all {
  @extend %font-heading-medium;
  @include column(12);
  text-align: left;

  @include respond-to($mq-m) {
    position: absolute;
    left: 0;
    top: 38px;
    text-align: right;
  }
}

Add flexbox support to promo boxes on the homepage
Add flexbox support to promo boxes on the homepage
