{% if page.hero_section.i_hero_bg %}
  {% assign i_bg_image = '' %}
  {% 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 features_hero" {% if i_bg_src %}style="background-image: url('{{ i_bg_src }}');"{% endif %}>
  <div class="custom_container_fluid">
    <div class="common_container">
      {% if page.hero_section.t_feature %}
        <div class="hero_top_badge">
          {{ page.hero_section.t_feature }}
        </div>
      {% endif %}
      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-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="{{ page.connected_apps_heading.t_search_alt }}"  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="{{ page.connected_apps_heading.t_search_alt }}"  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="{{ page.connected_apps_heading.t_search_alt }}"  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="{{ page.connected_apps_heading.t_search_alt }}"  class="img-fluid shine_star_right_bottom" %}
            {% endif %}
            <p>{{ page.hero_section.t_subheadline }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>