/*
 *  Article Thumbnail
 *    Styles for displaying an article in a short thumbnail object that can be
 *    put in the usual places.
 *
 *  Version:
 *    1.0.0 - 2018/10/31
 */
@import '~@styles/global';

.o-article-thumbnail {
  padding-bottom: 1.5em;

  &__header {
    display: block;
    position: relative;
  }

  &__image {
    display: block;
    width: 100%;
  }

  &__title {
    margin: 0;
    width: 100%;

    &-box {
      transition: all 0.3s $s-animation--ease-out;

      .o-article-thumbnail__header:hover & {
        transform: translateY(-7.5%);
      }
    }
  }

  &__content {
    padding: 0 0.5em;
  }
}