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

.c-featured-article {
  display: block;
  width: 100%;

  &__content {width: 100%;}

  &__box {}

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

  &__heading {
    transform: translateY(-60%);
    margin-bottom: -2em;
    overflow: visible;
  }

  &__title {
    margin: 0;
  }

  @include t-media-query($s-small-up) {
    padding: 1em;

    &__content { display: flex; }

    &__heading {
      transform: translate(-10%, -60%);
    }

    &__box {
      width: 40%;
      padding: 0.5em;

      &.is-image{order:2;width: 60%;}
    }
  }

  @include t-media-query($s-medium-up) {
    padding: 2em;
    &__box {
      width: 50%;
      &.is-image {width: 50%;}
      padding: 2em;
    }
  }
}