{% if page.banner.hero_bg %}
  {% assign hero_bg = '' %}
  {% capture hero_bg %}{% picture open_graph_1920 pages/{{ page.banner.hero_bg}} %}{% endcapture %}
{% endif %}

<section class="index_hero_wrap {{page.banner.p_class}} {% if page.banner.p_class %} pos_banner {% endif %}" {% if page.banner.hero_bg %} style="background-image: url('{{ hero_bg }}')" {% endif %}>
   {% if page.banner.video %}
    <video autoplay muted loop poster="{{ site.url }}/assets/videos/{{ page.banner.thumbnail }}">
      <source src="{{ site.url }}/assets/videos/{{ page.banner.video }}" type="video/mp4"/>
    </video>
    {% endif %}

    {% if page.banner.hero_bg_mobile %}
      {% capture hero_bg_mobile %}{% picture open_graph_799 pages/{{ page.banner.hero_bg_mobile }} %}{% endcapture %}
      <img src="{{ hero_bg_mobile }}" class="hardware_hero_bg_mobile" alt="{{page.banner.hero_bg_mobile | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
    {% endif %}
  <div class="is-container">
    <div class="index_hero">
        <div class="index_hero_content">
            <div class="row">
                <div class="col-md-12">
                    {% if page.banner.t_title %}
                      <h1 class="mt-0 hero_subtitle">{{page.banner.t_title}}</h1>
                    {% endif %}
                    {% if page.banner.t_subtitle %}
                    <h2 class="hero_subtitle">{{ page.banner.t_subtitle}}</h2>
                    {% endif %}
                    {% if page.banner.t_description %}
                    <p>{{ page.banner.t_description}}</p>
                     {% endif %}
                    {% if page.banner.t_button %}
                      <div class="hero_container-buttons">
                          <a href="{{ site.url }}/{{ page.banner.p_link}}" class="is-button primary-button">{{ page.banner.t_button}}</a>
                      </div>
                      {% endif %}
                </div>
            </div>
          {% if page.banner.feature_img %}
          <div class="image-row">
                {% if page.banner.feature_img.p_video %}
                <div class="image-box">
                  <video autoplay muted playsinline preload="none" loop poster="{{ site.url }}/assets/videos/{{ page.banner.feature_img.thumbnail }}">
                    <source src="{{ site.url }}/assets/videos/{{ page.banner.feature_img.p_video }}" type="video/mp4"/>
                  </video>
                  </div>
                {% endif %}
                {% if page.banner.feature_img.i_image2 %}
                <div class="image-box">
                  {% assign banner_main = '' %}
                  {% capture banner_main %}{% picture open_graph pages/{{ page.banner.feature_img.i_image2 }} %}{% endcapture %}
                  <img src="{{ banner_main }}" alt="{{page.banner.feature_img.i_image2 | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
                  </div>
                {% endif %}
                {% if page.banner.feature_img.i_image %}
                <div class="image-box">
                  {% assign banner_img = '' %}
                  {% capture banner_img %}{% picture open_graph pages/{{ page.banner.feature_img.i_image }} %}{% endcapture %}
                  <img src="{{ banner_img }}" alt="{{page.banner.feature_img.i_image | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}">
                  </div>
                {% endif %}

                
          </div>
            {% endif %}
      </div>
    </div>
</div>
</section>