{% capture quotes_svg %}
  <svg class="opinion-quotes" width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 10C23.6818 11.3796 23.346 12.8476 22.9924 14.4041C22.6742 15.9605 22.3737 17.4816 22.0909 18.9673C21.8081 20.4177 21.5783 21.7619 21.4015 23L14.1364 23L13.7652 22.4163C14.0833 21.1429 14.4899 19.7986 14.9848 18.3837C15.4798 16.9687 16.0101 15.5361 16.5758 14.0857C17.1768 12.6354 17.7601 11.2735 18.3258 10L24 10ZM12.2348 10C11.9167 11.3796 11.5808 12.8476 11.2273 14.4041C10.9091 15.9605 10.6086 17.4816 10.3258 18.9673C10.0429 20.4177 9.81313 21.7619 9.63636 23L2.37121 23L2 22.4163C2.31818 21.1429 2.72475 19.7986 3.2197 18.3837C3.71465 16.9687 4.24495 15.5361 4.81061 14.0857C5.41162 12.6354 5.99495 11.2735 6.56061 10L12.2348 10Z" fill="var(--green)"/>
  </svg>
{% endcapture %}
<div class="opinions-wrapper">
  <div class="opinions container width-limit">
    <h2 class="opinions-title strong">
      <span class="lang-en">Trusted by over 100,000 sales teams around the world</span>
      <span class="lang-de"></span>
      <span class="lang-es"></span>
      <span class="lang-fr"></span>
      <span class="lang-br"></span>
    </h2>
    <div class="opinions-list row">
      <div class="opinion-card col-12 col-md-4">
        <div class="opinion-text">
          {{ quotes_svg }}
          <span class="lang-en">It has made our sales department more effective and efficient. It’s easy to use and it’s constantly updated. It’s easy to use and it’s constantly updated.</span>
          <span class="lang-de"></span>
          <span class="lang-es"></span>
          <span class="lang-fr"></span>
          <span class="lang-br"></span>
        </div>
        <div class="opinion-person">
          <div class="opinion-person-image-wrapper">
            <img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-1.webp" alt="Ana Rinck, Operations Manager, BAKERpedia">
          </div>
          <div class="body-s opinion-person-info">
            <div class="opinion-person-info-name">
              Ana Rinck
            </div>
            <div class="opinion-person-info-title">
              <span class="lang-en">Operations Manager</span>
              <span class="lang-de"></span>
              <span class="lang-es"></span>
              <span class="lang-fr"></span>
              <span class="lang-br"></span>
              <span>, BAKERpedia</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="opinion-card col-12 col-md-4">
        <div class="opinion-text">
          {{ quotes_svg }}
          <span class="lang-en">Easy to use, reasonably priced, and ensures I don’t drop the ball on following up with my leads!</span>
          <span class="lang-de"></span>
          <span class="lang-es"></span>
          <span class="lang-fr"></span>
          <span class="lang-br"></span>
        </div>
        <div class="opinion-person">
          <div class="opinion-person-image-wrapper">
            <img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-2.webp" alt="Christine Luken, Author and Speaker, Financial Lifeguard">
          </div>
          <div class="body-s opinion-person-info">
            <div class="opinion-person-info-name">
              Christine Luken
            </div>
            <div class="opinion-person-info-title">
              <span class="lang-en">Author and Speaker</span>
              <span class="lang-de"></span>
              <span class="lang-es"></span>
              <span class="lang-fr"></span>
              <span class="lang-br"></span>
              <span>, Financial Lifeguard</span>
            </div>
          </div>
        </div>
      </div>
  
      <div class="opinion-card col-12 col-md-4">
        <div class="opinion-text">
          {{ quotes_svg }}
          <span class="lang-en">The best thing we love about Pipedrive is it does two-way sync with Google Apps. It has helped us to better organise and keep everything on track.</span>
          <span class="lang-de"></span>
          <span class="lang-es"></span>
          <span class="lang-fr"></span>
          <span class="lang-br"></span>
        </div>
        <div class="opinion-person">
          <div class="opinion-person-image-wrapper">
            <div class="opinion-person-image-wrapper">
              <img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-3.webp" alt="Nirmal Gyanwali, Managing Director, Nirmal Web Studio">
            </div>
          </div>
          <div class="body-s opinion-person-info">
            <div class="opinion-person-info-name">
              Nirmal Gyanwali
            </div>
            <div class="opinion-person-info-title">
              <span class="lang-en">Managing Director</span>
              <span class="lang-de"></span>
              <span class="lang-es"></span>
              <span class="lang-fr"></span>
              <span class="lang-br"></span>
              <span>, Nirmal Web Studio</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .opinions-wrapper {
    padding: 60px 0 20px;
  }
  .opinions-title {
    margin-bottom: 30px;
  }
  .opinions-list {
    margin: auto;
  }
  .opinion-card {
    padding-bottom: 40px;
  }
  .opinion-text {
    padding-bottom: 10px;
  }
  .opinion-person {
    display: flex;
  }
  .opinion-person-info {
    align-self: center;
    margin-left: 20px;
  }
  .opinion-person-image {
    border-radius: 50%;
    height: 60px;
    width: 60px;
  }
  .opinion-person-info-name {
    font-weight: 700;
  }
  .opinion-person-info-title {
    display: flex;
  }
  .opinion-person-info-title > span {
    white-space: nowrap;
  }
  @media only screen and (min-width: 768px) {
    .opinions-wrapper {
      padding: 80px 0;
    }
    .opinions-title {
      margin-bottom: 40px;
    }
    .opinion-card {
      padding-bottom: 0;
    }
  }
</style>