/// An illustration, text and action to present a feature (e.g. on the home
/// page).
///
/// @group teaser
///
/// @example scss - usage
///
///   @include k-Teaser;
///
/// @example html
///
///   <div class="k-Teaser">
///     <div class="k-Teaser__col k-Teaser__col--image">
///       <img … />
///     </div>
///     <div class="k-Teaser__col k-Teaser__col--text">
///       <div class="k-Teaser__title">…</div>
///       <div class="k-Teaser__action">…</div>
///     </div>
///   </div>
@mixin k-Teaser {
  .k-Teaser {
    @include k-grid;
    align-items: center;
  }

  .k-Teaser__col {
    @include k-grid-col(12);

    @include k-media-min('m') {
      // One large col with offsets
      @include k-grid-offset(2);
      @include k-grid-col(8);
    }

    @include k-media-min('l') {
      // Two cols with an offset on each side
      @include k-grid-col(4);

      @include k-grid-offset(1);

      // center offset needs to be twice as large
      &:nth-of-type(2) {
        @include k-grid-offset(2);
      }
    }
  }

  @include k-media-min('l') {
    .k-Teaser__col--start\@l-up {
      order: -1;

      &:nth-of-type(2) {
        @include k-grid-offset(1);
      }
    }

    .k-Teaser__col--end\@l-up {
      @include k-grid-offset(2);
    }
  }

  .k-Teaser__action {
    margin: k-px-to-rem(30px) 0;
  }

  .k-Teaser__col--text {
    @include k-typographyFont('light');
    @include k-typographyFontSize(0, 1.6);
    text-align: center;
    margin-bottom: 1rem;

    @include k-media-min('m') {
      @include k-typographyFontSize(2, 1.6);
    }

    @include k-media-min('l') {
      text-align: left;
    }
  }

  .k-Teaser__title {
    @include k-typographyFont('light');
    @include k-typographyFontSize(6);

    @include k-media-min('m') {
      @include k-typographyFontSize(9);
    }
  }

  .k-Teaser__col--image {
    svg, img {
      width: 100%;
    }
  }
}