/// A list of testimonies
///
/// @group testimonies
///
/// @example scss - usage
///
///   @include k-TestimonyList;
///
/// @example html
///
///   <div class="k-TestimonyList">
///     <div class="k-TestimonyList__row">
///       <div class="k-TestimonyList__item">…</div>
///       <div class="k-TestimonyList__item">…</div>
///       <div class="k-TestimonyList__item">…</div>
///       <div class="k-TestimonyList__item">…</div>
///     </div>
///   </div>
@mixin k-TestimonyList {
  @include k-with-module('k-TestimonyList') {
    $gutter: k-map-fetch($k-grid, 'gutter-width');

    .k-TestimonyList {
      @include k-grid;
    }

    .k-TestimonyList__row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      @include k-grid-col(10);
      @include k-grid-offset(1);

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

      @include k-media-min('m') {
        @include k-grid-col(12);
        @include k-grid-offset(0);
      }

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

    .k-TestimonyList__item {
      @include k-media-min('m') {
        @include k-grid-col(6);
        padding-left: 5%;
        padding-right: 5%;
      }

      @include k-media-min('l') {
        // do not use the padding strategy anymore (use a right margin instead)
        padding-left: 0;
        padding-right: 0;

        flex: 1;
        margin-right: $gutter;

        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}