{% if page.banner.hero_bg %}
  {% assign hero_bg = '' %}
  {% capture hero_bg %}{% picture width_1350 pages/{{ page.banner.hero_bg}} %}{% endcapture %}
{% endif %}
<section class="{% if page.banner.p_class %} {{page.banner.p_class}} {% endif %}" {% if page.banner.hero_bg %} style="background-image: url('{{ hero_bg }}')" {% endif %}>
<div class="hero is-container">
    <div class="row align-items-center">
    <div class="col-md-5" data-sal="slide-right" data-sal-duration="500" data-sal-ease="ease-in-out">
        <div class="hero_container">
            {% if page.banner.t_subtitle and page.banner.t_title %}
                <h1 class="hero_title">{{ page.banner.t_subtitle }}</h1>
                <h2 class="hero_subtitle">{{ page.banner.t_title }}</h2>
            {% elsif page.banner.t_subtitle %}
                <h1 class="hero_subtitle">{{ page.banner.t_subtitle }}</h1>
            {% elsif page.banner.t_title %}
                <h1 class="hero_subtitle">{{ page.banner.t_title }}</h1>
            {% endif %}
            <p>{{ page.banner.t_description}}</p>
            {% 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>
    <div class="col-md-7" data-sal="slide-left" data-sal-duration="500" data-sal-ease="ease-in-out">
        <div class="hero__image-container relative">
            {% if page.banner.video %}
                <video autoplay muted loop playsinline disablePictureInPicture controlslist="nopictureinpicture" preload="none" 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.index_video_feature %}
            <div class="owl-carousel owl-theme" id="index_slider">
                {% for items in page.banner.index_video_feature %}
                <div class="item">
                    <h2 class="m-0">{{ items.t_title }}</h2>
                    <p>{{ items.t_description }}</p>
                </div>
                {% endfor %}
            </div>
            {% endif %} -->

            {% if page.banner.i_image %}
            {% assign hero_terminal = "" %}
            {% capture hero_terminal %}{% picture open_graph pages/{{ page.banner.i_image }} %}{% endcapture %}

                <img src="{{ hero_terminal }}" alt="{{page.banner.i_image | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" class="hero__image">
            {% endif %}
        </div>
    </div>
</div>
</div>
</section>
{% if page.banner.section_jtbd_pos %}
<section class="hub-section dwc-content-top">
	<div class="container">
		<div data-slot="dwc" data-slot-name="{{ page.banner.section_jtbd_pos }}"></div>
	</div>
</section>
{% endif %}