{#

Element ID: Element01
Element Name: Full page hero

#}
{% set image = Image(element.background_image) %}

<section class="full-hero {% if webinar_active %}full-hero--webinar-active{% endif %}">
        {# <img src="{{ image.src }}" alt="{{ image.alt }}" class="full-hero__featured-img" /> #}
        <img  alt="{{ image.alt }}" class="full-hero__featured-img" 
            srcset="
            {{ TimberImage(image.src)}} 1600w,
            {{ TimberImage(image.src | resize(1000))}} 1000w,
            {{ TimberImage(image.src | resize(600))}} 600w"
            src="{{ TimberImage(image.src | resize(1000))}}"
            sizes="100vw"
            >
    <div class="full-hero__content">
    <div class="container container--narrow">
        <img src="{{ site.theme.link }}/frontend/img/hockey-coach-vision-logo-text.svg" alt="Hockey Coach Vision" />
        <h2>{{ element.subtitle }}</h2>
        <div class="full-hero__buttons">
            <a href="{{ get_it_now }}" class="btn btn--primary">Get it now</a>
            <a href="#" class="btn btn--hollow-primary-dark hide-mobile modal-video-trigger" data-video-url="https://www.youtube.com/embed/{{ function("get_youtube_id", element.video_button_link) }}">{{ element.video_button_text }}</a>
            <a href="#" class="btn btn--hollow hide-desktop modal-video-trigger" data-video-url="https://www.youtube.com/embed/{{ function("get_youtube_id", element.video_button_link) }}">{{ element.video_button_text }}</a>
        </div>
        </div>
    </div>
</section>
{% if webinar_active %}
    <section class="page-link-wrap">
        <div class="page-link">
            <h2 class="">{{ webinar_title }}</h2>
            <p class="">{{ webinar_date }}</p>
            <a href="{{ webinar_link }}" class="btn btn--primary small">{{ webinar_more_button_text }}</a>
        </div>

    </section>
{% endif %}