{#

Element ID: Element02
Element Name: Hero image

#}


<section id="{{ element.html_id  }}" class="hero-page {{ element.text_centered ? "centered" : '' }} ">
    <div class="background-image">
        <picture>
            <source srcset="{{ TimberImage(element.background_image).src }}" media="(min-width: 620px)">
            <img class="" src="{{ TimberImage(element.background_image_mobile).src }}" alt="Linde firefighting VR" />
        </picture>
    </div>
    <div class="container" data-aos="fade-up">
        <div class="row">
            <div class="col-12 col-lg-5">
                <h1> {{ element.title  }} </h1>
                <p> {{ element.description  }}</p>
                <div class="btn-{{element.text_centered ? 'center' : 'left'}} m-t-lg">
                    {%  if(element.link_to_video) %}

                        {% if ( element.video.url ) %}
                            <a href="#" class="btn btn--hollow video-trigger"  data-video-link="{{ element.video.url }}" onClick="gtag('event', 'play_video', { 'event_category' : 'Play Hero image video', 'event_label' : '{{ element.video.title }}' });">
                                <span>{{ element.button_text }}</span>
                            </a>
                        {% endif %}
                    {% else %}
                      {% if element.button_text %}
                        <a href="{{ element.button_url }}" class="btn btn--hollow">
                            <span>{{ element.button_text }}</span>
                        </a>
                      {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>