// Teaser
//
// Styles for teasers, typically lists of linked excerpts.
//
// Styleguide: Component.Teaser

a.teaser {
  display: block;
  //
  &:hover {
    outline: 0.5em solid lighten($grey,5%);
    background: lighten($grey,5%);
    //
    .title,
    .subtitle {
      color: $blue;
    }
  }
}

.content .teaser,
.teaser {
  *.title {
    margin-bottom: 0;
  }
  //
  .subtitle {}
  .title + .subtitle {
    margin-top: 1em;
  }
}

.teaser + .teaser {
  margin-top: $gap;
}

.media.teaser {
  .media-left {
    width: 12em;
    img {
      width: 100%;
      height: auto;
    }
  }
}

.media-list .media,
.media-list .media + .media {
  margin-bottom: $gap;
}

.media-list .teaser {
  .media-left {
    height: 12rem;
    overflow: hidden;
    img + .byline {
      display: none;
    }
  }
  &:hover {
    .media-left {
      img {
        display: none;
      }
      .byline {
        display: block;
      }
    }
  }
}
