/// List of quotes of a newspaper, used on a home page for example.
///
/// @example scss
///
///   @include k-PressQuotes;
///
/// @example html
///
///   <div class="k-PressQuotes">
///     <div class="k-PressQuotes__title">…</div>
///     <div class="k-PressQuotes__quotes">
///       <div class="k-PressQuotes__quote">
///         <blockquote class="k-PressQuotes__quotes__quote">…</blockquote>
///         …
///       </div>
///       …
///   </div>
@mixin k-PressQuotes {
  .k-PressQuotes {
    @include k-grid;
    text-align: center;
  }

  .k-PressQuotes__title {
    @include k-grid-col(12);
    margin-top: 0;
    margin-bottom: k-px-to-rem(30px);

    @include k-typographyFont('light');
    @include k-typographyFontSize(4, 1.5);
  }

  .k-PressQuotes__quotes {
    @include k-grid-col(6);
    @include k-grid-offset(3);

    @include k-media-min('l') {
      @include k-grid-col(10);
      @include k-grid-offset(1);
      display: flex;
    }

    @include k-media-min('xl') {
      @include k-grid-col(8);
      @include k-grid-offset(2);
    }
  }

  .k-PressQuotes__quote {
    margin: 0 k-px-to-rem(20px) k-px-to-rem(30px);

    @include k-media-min('l') {
      flex: 1;
    }
  }

  .k-PressQuotes__quote__text {
    margin: 0 0 k-px-to-rem(20px);

    // Override boostrap on blockquotes
    padding: 0;
    border: 0;

    @include k-typographyFont('light');
    @include k-typographyFontSize;
    font-style: italic;

    @include k-media-min('l') {
      // Align on three lines of text, so that content below the quote (for
      // example an image of the source) stays aligned.
      min-height: k-px-to-rem(70px);
    }
  }
}