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

.intro-narrative {
  @media (min-width: $min-720) {
    margin: auto;
    width: 850px;
  }
}

.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;
  }

  .has-sponsor & {
    margin-bottom: 0;

    &::after {
      display: none;
    }
  }
}

.intro-narrative__text {
  color: $darkgray;
  font-family: $miller-daily;
  font-size: 1.6rem;
  line-height: (26 / 16);

  @media (min-width: $min-720) {
    font-size: 2rem;
    line-height: (36 / 20);
  }

  em {
    font-style: italic;
  }
}

.intro-narrative__featured {
  @include lede;

  em {
    font-style: normal;
  }

  p {
    margin: 2.5rem 0;
  }
}

.intro-narrative__title {
  color: $darkgray;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.02rem;
  margin-bottom: 1rem;
  margin-top: 2.5rem;
  text-align: left;
}

.intro-narrative__expanded {
  display: none;
}

.intro-narrative__expanded-link {
  margin-top: 1.9rem;
  text-align: center;
}

.intro-narrative__more,
.intro-narrative__less {
  @include more();
  cursor: pointer;
  display: inline-block;
  font-style: normal;
  width: 111px;
}

.intro-narrative__more-separator,
.intro-narrative__less-separator {
  color: $color-light-slate;
  margin-top: 5.6rem;
  width: 111px;
}

.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);
}

.intro-narrative__logo {
  display: block;
  margin: 0 auto 1rem auto;
  width: 22rem;
  padding-bottom: 1rem;

  @media (max-width: $min-720) {
    width: 13rem;
  }
}