typography.scss

.top .left-content .content {
  h2 {
    color: $color_peach;
    font-size: em(26);
    font-family: $alt-font-family;
    font-weight: bold;
    font-style: italic;
    margin: em(30,26) 0;
    letter-spacing: -.5px;

    &:first-child {
      margin: 0 0 em(20,26) 0;
    }

    @media (min-width: $media_ewok) {
      font-size: em(37);
      margin: em(60,37) 0;

      &:first-child {
        margin: 0 0 em(40,37) 0;
      }
    }

    @media (min-width: $media_vader) {
      margin: em(100,37) 0;
    }
  }

  h3 {
    font-size: em(20);
    font-family: $alt-font-family;
    font-weight: bold;
    font-style: italic;
    display: inline;
    position: relative;
    background-image: linear-gradient(#e8e3e8, #e8e3e8);
    background-size: 1px 6px;
    background-repeat: repeat-x;
    background-position: 0% 95%;
    padding-right: em(18, 24);

    @media (min-width: $media_ewok) {
      font-size: em(24);
    }
  }

  p {
    font-size: em(12);
    margin: 1.5em 0;
    max-width: em(350,true);

    &:first-child {
      font-weight: bold;
      font-size: 1em;
      max-width: none;
      margin-top: 0;
    }

    @media (min-width: $media_ewok) {
      font-size: 1em;

      &:first-child {
        font-size: em(24);
      }
    }
  }

  h3 + p {
    margin-top: em(6,12);
    margin-bottom: 2.5em;
  }

  blockquote {
    padding: em(36) 0;
    margin: 1em 0;
    text-align: center;
    color: $color_peach;
    font-family: $alt-font-family;
    font-style: italic;
    position: relative;
    max-width: em(350,true);

    @media (min-width: $media_ewok) {
      margin: em(30) 0;
      padding: em(38) 0;
    }

    &:before, &:after {
      content: "";
      background-image: url(#{"{{ 'quote-orange.svg' | asset_url }}"});
      width: em(22,true);
      height: em(15,true);
      position: absolute;
      left: 50%;
      margin-left: em(-11,true);
      top: 0;
    }

    &:after {
      transform: rotate(180deg);
      top: auto;
      bottom: 0;
    }

    p {
      font-size: em(18);
      margin: 1em 0;

      &:first-child {
        margin-top: 0;
        font-size: em(18);
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}