/*
 *  Featured Blog Section
 *    Section for featuring a large blog item.
 *
 *  Version:
 *    1.0.0 - 2018/10/30
 */
@import '~@styles/global';

$c-featured-article--overlay: rgba(black, 0.3);

.c-featured-article {
  position: relative;

  &__header,
  &__body {
    position: absolute;
    z-index: 2;
    right: 1.5em;
    bottom: 0.5em;
  }

  &__body { display: none; }

  &__title,
  &__description {
    display: inline-block;
    margin: 0;
  }

  &:after {
    //content: "";
    @include t-absolute-fill();
    background: $c-featured-article--overlay;
    transition: all 1s $s-animation--ease-out;
    z-index: 1;
  }

  @include t-media-query($s-xsmall-up) {
    &__header {
      right: 5em;
      bottom: 3em;
    }
  }

  @include t-media-query($s-small-up) {
    &__header {
      left: 2em;
      top: 7em;
      bottom: auto;
      right: auto;
    }
  }

  @include t-media-query($s-medium-up) {
    &__header {
      left: 4em;
      top: 8em;
    }

    &__body {
      display: block;
      bottom: 1.5em;
      right: 2.5em;
    }
  }

  @include t-media-query($s-large-up) {
    &__header {
      top: 11em;
    }

    &__body {
      bottom: 5em;
      right: 0em;
    }
  }
}