.content-wall {
  width: 100%;
  padding: 30px 0;
  @include breakpoint($screen-md) {
    padding: 60px 0;
  }
}
.content-wall__title {
  margin-bottom: 30px;
  text-align: center;
}
.cw-region {
  width: 100%;
  margin: 0 auto;
  @include breakpoint($screen-md) {
    padding: 0 gutter();
  }
  @include breakpoint($screen-lg) {
    padding: 0;
  }
}
.cw-region {
  article {
    @media (max-width: $screen-sm-max) {
      margin: 0 calc(4 * #{gutter()}) calc(4 * #{gutter()});
      width: calc(100% - (8 * #{gutter()}));
    }
    @include breakpoint($screen-md) {
      margin-bottom: calc(2 * #{gutter()});
      width: 100%;
    }
    &.block-content--view-mode-cw-s,
    &.view-mode-cw_s {
      @include breakpoint($screen-md) {
        @include span(4);
      }
    }
    &.block-content--view-mode-cw-m,
    &.view-mode-cw_m {
      @include breakpoint($screen-md) {
        @include span(6);
      }
    }
    &.block-content--view-mode-cw-mp,
    &.view-mode-cw_mp {
      @include breakpoint($screen-md) {
        @include span(8);
      }
    }
    &.block-content--view-mode-cw-l,
    &.view-mode-cw_l {
      @include breakpoint($screen-md) {
        @include span(12);
      }
    }
  }
}