.cw-quote__bg-image {
  position: relative;
  width: 100%;
  height: 450px;
  background-repeat: repeat;
  background-position: 50% 50%;
}
.cw-quote__outer-wrapper {
  position: relative;
  overflow: hidden;
}
.cw-quote__inner-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}
.cw-quote__body {
  @include span(10);
  @include push(1);
}
.cw-quote__image {
  overflow: hidden;
  width: 85px;
  height: 85px;
  margin: 10px auto 30px;
  @include border-radius(50px);
  img {
    display: block;
    height: auto;
    background-color: inherit;
    @include border-radius(inherit);
  }
}

/* CW L and MP viewmodes */
.view-mode-cw_l,
.view-mode-cw_mp {
  .cw-quote__inner-wrapper {
    @include breakpoint($screen-lg) {
      top: 0;
      height: 100%;
      transform: translateY(0);
    }
  }
  .cw-quote__body {
    @include breakpoint($screen-lg) {
      @include span(7);
      position: absolute;
      top: 50%;
      left: span(1);
      transform: translateY(-50%);
    }
  }
  .cw-quote__image {
    @include breakpoint($screen-lg) {
      @include span(3);
      position: absolute;
      top: auto;
      bottom: 0;
      left: span(8);
      height: auto;
      margin-bottom: 0;
      // Override the background colour option on this breakpoint
      background-color: transparent;
      @include border-radius(0);
      transform: translateY(0);
      img {
        width: 100%;
        height: auto;
        background-color: inherit;
        @include border-radius(0);
      }
    }
  }
}

/* CW L viewmode only */
.cw-region article.cw-quote.view-mode-cw_l {
  @include breakpoint($screen-lg) {
    .cw-quote__image {
      width: 35%;
      left: auto;
      top: 0;
      right: 0;
      margin: 0;
    }
  }
}

/* Medium & Small viewmode */
.cw-region article.cw-quote.view-mode-cw_mp {
  @include breakpoint($screen-lg) {
    @include span(8);
    .cw-quote__body {
      @include span(6);
    }
    .cw-quote__image {
      width: 50%;
      top: 0;
      bottom: auto;
      left: auto;
      margin: 0;
      right: 0;
    }
  }
}
