<div class="quote-section np-max-width">
  <div class="quote-section-content">
    <i class="fal fa-quote-right"></i>
    <div class="quote-text">
     {{quote_text}}
    </div>
    <div class="quote-line"></div>
    <div class="quote-author-wrapper">
      <div class="quote-author-name">{{quote_author}}</div>
      <div class="quote-author-title">{{quote_title}}</div>
    </div>
  </div>
</div>

<style>
  .quote-section {
    margin: 32px auto;
    padding: 64px 16px;
    position:relative;
  }

  .quote-section-content {
    display: flex;
    flex-direction: column;
  }

  .quote-section .fa-quote-right {
    left: auto;
    right: 16px;
    font-size: 50px;
  }

  .quote-section .quote-text {
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 16px;
  }

  .quote-section .quote-line {
    width: 100%;
    height: 1px;
    max-width: 75px;
        background-color: #000;
    position:relative;
  }

  .quote-section .quote-author-wrapper {
    margin-top:16px;
  }

  .quote-section .quote-author-name {
    font-weight:700;
    font-size:18px;
  }

  @media (min-width:768px) {
    .quote-section {
      padding: 80px 16px;
    }

    .quote-section-content {
      flex-direction: row;
    }

    .quote-section .fa-quote-right {
      left: -55px;
      right: auto;
      top:60px;
      font-size: 55px;
    }

    .quote-section .quote-text {
      width:60%;
      font-size: 38px;
      line-height: 46px;
      margin-bottom: 0;
      margin-right:32px;
      flex:2;
    }

    .quote-section .quote-line {
      width: 1px;
      height: auto;
      min-height: 100%;
      max-width: 1px;
    }

    .quote-section .quote-author-wrapper {
      margin-top:auto;
      margin-left:32px;
      width: 25%;
    }

    .quote-section .quote-author-name {
      font-size:26px;
    }

    .quote-section .quote-author-title {
      font-size:22px;
    }
  }
</style>