{% assign product_needle = '' %}
{% capture product_needle %}{% picture direct-url_200 pages/product_needle.png %}{% endcapture %}

{% assign product_head = '' %}
{% capture product_head %}{% picture direct-url_200 pages/product_head.png %}{% endcapture %}

{% assign product_connector = '' %}
{% capture product_connector %}{% picture direct-url_200 pages/product_connector.png %}{% endcapture %}

{% assign product_body = '' %}
{% capture product_body %}{% picture direct-url_200 pages/product_body.png %}{% endcapture %}

{% assign product_chip = '' %}
{% capture product_chip %}{% picture direct-url_200 pages/product_chip.png %}{% endcapture %}

{% assign product_battery = '' %}
{% capture product_battery %}{% picture direct-url_200 pages/product_battery.png %}{% endcapture %}
<div class="content text-center">
  <h2 class="text-orange">{{ feature.t_headline }}</h2>
  <p>{{ feature.t_subheadline }}</p>
</div>
<section class="tech-steps row-light">
  <div class="dt w-100pc max-width-wide pr">
    <img data-0="top:60px" class="product-anim product-anim-3 pa" src="{{ product_needle }}" />
    <img data-400-top="top:282px" data-200-top="top:352px" class="product-anim product-anim-4 pa"
      src="{{ product_head }}" />
    <img data-400-top="top:330px" data-100-top="top:501px" class="product-anim product-anim-2 pa"
      src="{{ product_connector }}" />
    <img data-400-top="top:380px" data--300-top="top:1300px" class="product-anim product-anim-7 pa"
      src="{{ product_body }}" />
    <img data-400-top="top:381px" data--100-top="top:900px" class="product-anim product-anim-6 pa"
      src="{{ product_chip }}" />
    <img data-400-top="top:481px" data-300-top="top:701px" class="product-anim product-anim-1 pa"
      src="{{ product_battery }}" />
    <div class="">

      {% for item in feature.features %}
      <div class="tech-steps-item dt">
        <div class="tech-steps-descr dtc va-top">
          <h3 class="text-orange product-feature">{{ item.t_headline_1 }}</h3>
          <p class="f-14 hide-small product-description">{{ item.t_description_1 }}</p>
        </div>
        <div class="tech-steps-img dtc va-top tc">
        </div>
        <div class="tech-steps-expl dtc va-top">
          <h3 class="text-orange product-feature">{{ item.t_headline_2 }}</h3>
          <p class="f-14 hide-small product-description">{{ item.t_description_2 }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>