<section id="services-section" class="section gap">
  <div class="bg" data-anchor-target="#services-section"
  data-bottom-top="transform: translate3d(0px, -150px, 0px);"
  data-top-bottom="transform: translate3d(0px, 150px, 0px);"
  ></div>
  <div class="overlay-wrapper">
    <div class="fade-in">
      <h1 class="section-heading">What I Do</h1>
      <span class="divider"></span>
      <div class="services-wrapper">
        {% for row in site.data.services %}
        <div class="service-row">
          {% for service in row.services %}
          <div class="service-column">
            <div class="sprite {{service.sprite}}"></div>
            <h2 class="service-heading">{{service.heading}}</h2>
            <p class="service-text">{{service.text}}</p>
          </div>
          {% endfor %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>
