{% if page.hero_section.i_hero_bg %}
  {% capture i_bg_image %}{% picture pagebg-url pages/{{ page.hero_section.i_hero_bg }} %}{% endcapture %}
  {% assign i_bg_src = i_bg_image | split:'src="' | last | split:'"' | first %}
{% endif %}

<section class="home_hero" {% if i_bg_src %}style="background-image: url('{{ i_bg_src }}');"{% endif %}>
  <div class="custom_container_fluid">
    <div class="common_container">
      <div class="col-12">
        <div class="row m-0">
          <div class="hero_description">
            {% if page.hero_section.i_star_1 %}
              {% picture article_top pages/{{page.hero_section.i_star_1}} alt="star" class="img-fluid shine_star_left_top" %}
            {% endif %}
            {% if page.hero_section.i_star_2 %}
              {% picture article_top pages/{{page.hero_section.i_star_2}} alt="star" class="img-fluid shine_star_right_top" %}
            {% endif %}

            <h1>{{ page.hero_section.t_headline }}</h1>

            {% if page.hero_section.i_star_3 %}
              {% picture article_top pages/{{page.hero_section.i_star_3}} alt="star" class="img-fluid shine_star_left_bottom" %}
            {% endif %}
            {% if page.hero_section.i_star_4 %}
              {% picture article_top pages/{{page.hero_section.i_star_4}} alt="star" class="img-fluid shine_star_right_bottom" %}
            {% endif %}

            <p>{{ page.hero_section.t_subheadline }}</p>
          </div>

          <div class="hero_video_section">
            {% capture hero_left_poster %}{% picture direct-url_1064 pages/{{ page.hero_section.i_hero_image_left }} %}{% endcapture %}
            <video class="hero_left" autoplay muted loop playsinline preload="none" poster="{{ hero_left_poster }}" data-lazy-video disablePictureInPicture>
              <source data-src="{{ '/assets/videos/' | append: page.hero_section.v_hero_left | relative_url }}" type="video/mp4">
            </video>

            <div class="main_video">
              {% capture hero_main_poster %}{% picture direct-url_1064 pages/{{ page.hero_section.i_hero_image_main }} %}{% endcapture %}
              <video class="center_video" autoplay muted loop playsinline preload="none" poster="{{ hero_main_poster }}" data-lazy-video disablePictureInPicture>
                <source data-src="{{ '/assets/videos/' | append: page.hero_section.v_hero_main | relative_url }}" type="video/mp4">
              </video>
            </div>

            {% capture hero_right_poster %}{% picture direct-url_1064 pages/{{ page.hero_section.i_hero_image_right }} %}{% endcapture %}
            <video class="hero_right" autoplay muted loop playsinline preload="none" poster="{{ hero_right_poster }}" data-lazy-video disablePictureInPicture>
              <source data-src="{{ '/assets/videos/' | append: page.hero_section.v_hero_right | relative_url }}" type="video/mp4">
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>