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

.love-letter__heading {
  @include h1(3.1rem);

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

.love-letter__text {
  color: $feature-copy;
  font-family: $benton-sans;
  font-size: $font-size;
  font-style: italic;
  line-height: 1.8;
  margin: 0 auto 5.5rem;
  text-align: center;

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

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

.love-letter__author {
  font-size: 1.4rem;
  letter-spacing: .01rem;
  text-align: center;

  a {
    display: inline-block;
  }
}

.love-letter__author__image {
  @include author-image($min-720);
  transform: scale(1);
  transition: transform $animation-speed;

  .love-letter__author a:hover &,
  .love-letter__author a:focus & {
    transform: scale(1.1);
  }
}

.love-letter__author__creds {
  @include author-creds($min-720);
}

.love-letter__author__creds__name {
  @include author-name($min-320);
}

.love-letter__author__creds__title {
  @include author-title($min-320);
}