---
layout: default
---

{% if page.hero %}
<header class="product__strap "  aria-label="{{ strap }}">
  <h1>
    {{ page.title }}
  </h1>
</header>

<div class="product__hero">
  {% picture {{ page.hero.file | prepend: 'content/' }}
    --img class=""
    --alt {{ page.hero.alt }} %}
</div>
{% endif %}

<div class="product__info">

  <h1 class="product__title" data-aos="fade-down">
    {{ site.data.copy.product[page.env].title }}
  </h1>

  {% for para in site.data.copy.product[page.env].overview %}
  <p data-aos="fade-up">
    {{ para.para }}
  </p>
  {% endfor %}
</div>


<div class="product__wrap">
  <div class="product__image" data-aos="zoom-in-right" data-aos-anchor-placement="top-center">

    {% include image.html image="device_1" alt="Describe the image" class="product--image" %}

  <div class="product__description">
    <p data-aos="fade-left">
      <span class="product__start">
        {{ site.data.copy.product[page.env].device[0].para | split: '\' | first }}
      </span> {{ site.data.copy.product[page.env].device[0].para | split: '\' | last }}
    </p>
  </div>
</div>


<div class="product__wrap">
  <div class="product__description txt-right">

    <p data-aos="fade-right">
      <span class="product__start">
        {{ site.data.copy.product[page.env].device[1].para | split: '\' | first }}
      </span> {{ site.data.copy.product[page.env].device[1].para | split: '\' | last }}
      </p>

  </div>

  <div class="product__image" data-aos="zoom-in-left" data-aos-anchor-placement="top-center">
    {% include image.html image="device_2" alt="Describe the image" class="product--image" %}

</div>