{% assign video_poster_path = '' %}
{% if page.hero_1.p_video_poster %}
{% capture image_loc %}{% picture direct-url_1064 pages/{{ page.hero_1.p_video_poster }} %}{% endcapture %} 
{% capture video_poster_path %}{{image_loc}}{% endcapture %} 
{% endif %}

{% assign mobile_image_path = '' %}
{% if page.hero_1.p_mobile_landing %}
{% capture mobile_image_path %}{% picture direct-url_1064 pages/{{ page.hero_1.p_mobile_landing }} %}{% endcapture %} 
{% endif %}

<div class="alta_banner container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5">
            <h1>{{page.hero_1.t_headline}}</h1>
            <h2>{{page.hero_1.t_subheadline}}</h2>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-7 col-xl-7 col-xxl-7">
            <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
                <!-- slides -->
                <div class="carousel-inner">
                  <img src = "{{ mobile_image_path }}" fetchpriority="High" alt="{{page.hero_1.t_headline}}"/>
                  <video autoplay muted loop playsinline poster="{{ video_poster_path }}" preload="auto" loading="eager" fetchpriority="high">
                    <source src="{{ site.url }}/assets/videos/{{ page.hero_1.p_video }}" type="video/mp4"></source>
                  </video>
                  {% for item in page.hero_1.slider_data %}
                  <div class="carousel-item  {% if forloop.index0 == 0 %}active{% endif %}">
                      {% if item.p_video and item.i_image %}
                      
                      {% else %}
                      {% if item.i_image %}
                      {% picture hero_3_img pages/{{ item.i_image }} alt="{{ item.i_image }}" %}
                      {% endif %}
                      {% endif %}
                    <p>{{ item.t_headline }}</p>
                  </div>
                  {% endfor %}
                </div>
                <ol class="carousel-indicators list-inline">
                  {% for item in page.hero_1.slider_data %}
                  <li class="list-inline-item {% if forloop.index0 == 0 %}active{% endif %}">
                    <a id="carousel-selector-{{ forloop.index0 }}" class="selected" data-slide-to="{{ forloop.index0 }}" data-target="#custCarousel">
                      {{ item.t_indicators }}
                    </a>
                  </li>
                  {% endfor %}
                 </ol>
              </div>
            
        </div>
    </div>
</div>