@import "../../../sass/webpack_deps";

.intro-narrative__heading {
  @include h1();

  [class*="icon-"] {
    color: saturate($color-red, 16);
    display: inline-block;
    font-size: 0;
    transform-origin: 50% 60%;

    &::before {
      font-size: 1.6rem;

      @media (min-width: $min-720) {
        font-size: 2.8rem;
      }
    }
  }

  &:hover [class*="icon-"] {
    animation: heartbeat 3000ms infinite;
  }
}

.intro-narrative__text {
  color: $feature-copy;
  font-size: $font-size;
  font-style: italic;
  line-height: 1.8;
  margin: 0 auto 3rem;
  text-align: center;

  @media (min-width: $min-480) {
    font-size: 2.1rem;
    max-width: 80%;
  }
}

.intro-narrative__more {
  @include more();
  display: inline-block;
  font-style: normal;
}

.intro-narrative__author {
  font-size: 1.4rem;
  letter-spacing: .01rem;
  margin: 0 auto;
  width: 93%;

  @media (min-width: $min-720) {
    text-align: center;
  }
}

.intro-narrative__author__image {
  @include author-image($min-720);
  margin-right: 0;
}

.intro-narrative__author__creds {
  @include author-creds($min-720);
}

.intro-narrative__author__creds__name {
  @include author-name($min-320);
}

.intro-narrative__author__creds__title {
  @include author-title($min-320);
}