/*------------------------------------*\
  $HIGHLIGHTS
\*------------------------------------*/

.highlight {
  width: 100%;

  @include mq(mq600) {
    @include span(4 of 12);
    position: relative;
    padding-bottom: 35px;

    &:last-child {
      @include span(last 4 of 12);
    }
  }

  @include mq(mq960) {
    @include span(3 of 12);

    &:last-child {
      @include span(last 3 of 12);
    }
  }

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

  &__title {
    margin-bottom: 20px;
    font: {
      family: $heading-font;
      weight: 400;
      size: font-size(16);
    }
    line-height: 1.3;

    a {
      color: $dark-grey;
      text-decoration: none;

      @include states {
        text-decoration: underline;
      }
    }
  }

  /**
   * 1. <picture> needs to be floated left
   */
  &__img {
    margin-bottom: 20px;
    float: left; /* 1 */
    width: 100%;
    max-width: 100%;

    img { margin: 0; }
  }

  &__desc {
    font: {
      family: $body-font;
      weight: 300;
      size: font-size(16);
    }
    line-height: 1.5;
  }

  .btn {
    @include mq(mq600) {
      position: absolute;
      bottom: 0;
    }
  }

}