Quote: Quote With Image

/* QUOTE STYLES
 *
 * Note: quote font sizes are not used anywhere else on the site,
 * so they're defined in this file rather than settings.scss
 */
$quoteOutdent: 76px;
$quoteFontSize: 24px;
$quoteLineHeight: 40px;
$quoteFontSizeSmall: 20px;
$quoteLineHeightSmall: 28px;

blockquote,
.quote {
  @include rem(margin, $grid-typo-spacing-s 0 $grid-typo-spacing-m);
  color: $black;
  font-family: $supplementaryFont;
  font-size: $bodyFontSizeSmall;
  font-style: normal;
  font-weight: bold;

  @include respond-to($grid-breakpoint-s) {
    font-size: 17px;
  }
}

cite {
  @include rem(margin-top, $grid-typo-spacing-xxs);
  color: $ncDarkGrey;
  display: block;
  font: normal normal normal 13px $bodyFontFamily;
}

.quote--pullquote {
  @include rem(margin, $grid-typo-spacing-xs 0 ($grid-typo-spacing-xxxs * 9));
  position: relative;

  @include respond-to($grid-breakpoint-s) {
    @include rem(margin, $grid-typo-spacing-s 0 $grid-typo-spacing-l);
  }

  &:before {
    @extend %quote__icon--apostrophe;
    content: '';
    display: block;
    height: $grid-typo-spacing-m + $grid-typo-spacing-xxxs;

    @include respond-to($grid-breakpoint-l) {
      @include rem(left, -$quoteOutdent);
      height: $grid-typo-spacing-m + $grid-typo-spacing-xxs;
      position: absolute;
      z-index: -1;
    }
  }

  .quote__text {
    @include rem(margin, $grid-spacing-unit * 1.5 0 0);
    @include font-size-with-line-height(
      $quoteFontSizeSmall,
      $quoteLineHeightSmall
    );
    font-family: $supplementaryFont;

    @include respond-to($grid-breakpoint-s) {
      @include font-size-with-line-height($quoteFontSize, $quoteLineHeight);
    }

    @include respond-to($grid-breakpoint-l) {
      @include rem(padding-top, $grid-spacing-unit * 2.5);
    }

    + .quote__source {
      @include rem(margin-top, $grid-spacing-unit);
    }
  }

  .quote__source {
    font: normal normal bold 14px $bodyFontFamily;

    @include respond-to($grid-breakpoint-s) {
      font-size: 15px;
    }
  }
}
.quote__container--imagequote {
  @include rem(margin-top, $grid-typo-spacing-m + 2);
  @include rem(padding-bottom, $grid-typo-spacing-l - 5);
  display: block;
  position: relative;

  @include respond-to($grid-breakpoint-xs) {
    @include rem(
      margin-top,
      ($grid-typo-spacing-l + $grid-typo-spacing-xxs + 1)
    );
    @include rem(
      padding-bottom,
      ($grid-typo-spacing-xxxs + $grid-typo-spacing-xxs)
    );
  }

  @include respond-to($grid-breakpoint-m) {
    @include rem(
      margin-top,
      ($grid-typo-spacing-xs + $grid-typo-spacing-xs + $grid-typo-spacing-s)
    );
    @include rem(
      padding-bottom,
      ($grid-typo-spacing-xxxs + $grid-typo-spacing-xxs)
    );
  }
  blockquote {
    @include rem(padding-right, $grid-typo-spacing-xxs);
    font-size: $leadIntroFontSize - 3;
    line-height: $leadIntroLineHeight - 1;
    margin-top: 0;

    @include respond-to(0, $grid-breakpoint-m) {
      font-size: $standfirstFontSize - 1;
      line-height: $standfirstLineHeight;
    }
  }
  .quote__svg--apostrophe {
    @extend %quote__icon--apostrophe;
    height: $grid-typo-spacing-m + $grid-typo-spacing-xxxs;
    left: -($column-spacing * 2);
    position: absolute;
    top: -$grid-typo-spacing-xs;

    @include respond-to(0, $grid-breakpoint-m) {
      height: $grid-typo-spacing-m + 3;
      left: 0;
      top: -($grid-typo-spacing-m + $grid-typo-spacing-xxs);
    }
  }
  .quote__text__container {
    display: inline-block;
    vertical-align: top;
    width: percentage(121/200);

    @include respond-to(0, $grid-breakpoint-xs) {
      display: block;
      width: 100%;
    }
  }
  .quote__image__container {
    @include rem(margin-bottom, ($grid-typo-spacing-xxxs - 2));
    @include rem(padding-top, ($grid-typo-spacing-xxs - 2));
    display: inline-block;
    width: percentage(3/8);
    img {
      width: 100%;
    }
    cite {
      font-weight: bold;
    }

    @include respond-to(0, $grid-breakpoint-xs) {
      @include rem(margin-top, -($grid-typo-spacing-xxs + 4));
      display: block;
      padding-top: 0;
      width: 100%;
      img {
        @include rem(margin-right, $grid-typo-spacing-xs);
        display: inline-block;
        width: percentage(9/20);
      }
      cite {
        display: inline-block;
        margin-top: 0;
        vertical-align: bottom;
        width: percentage(9/20);
      }
    }
  }
}
%quote__icon--apostrophe {
  background: url('../images/quote-icon.svg') no-repeat;
  background-size: auto 100%;
  width: 100%;
}
// just for pull quotes
.node-type-researcher-story {
  .wt-grid-section-center > .quote__container--pullquote {
    @include respond-to($grid-breakpoint-s) {
      @include rem(margin-left, $quoteOutdent);
      width: 100%;
    }

    @include respond-to($grid-breakpoint-ml) {
      @include rem(margin-left, $grid-typo-spacing-s * 3);
    }
  }
}