Hero

<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/hero.css?cb={{cacheBuster}}">

<div class="hero {{modifier}} {{#if spacer}}hero--spacer-{{spacer}}{{/if}} {{#if image}}hero--with-image{{/if}} {{#if videoUrl}}hero--with-video{{/if}}"
    data-module="hero">

    {{#if image}}
    <div class="hero__image {{#if imagePositionX}}hero__image--{{imagePositionX}}-x{{/if}} {{#if imagePositionY}}hero__image--{{imagePositionY}}-y{{/if}}">
        {{> @picture sources=image.sources altText=image.altText fallbackImageUrl=image.fallbackImageUrl width=image.width height=image.height disableLazyLoading=true}}
    </div>
    {{/if}}
    {{#if video}}
        <div class="hero__video">
            {{> @video video}}
        </div>
    {{/if}}

    <div class="hero__content">
        <div class="hero__content-inner">
            {{#if link}}
            <a href="{{link.url}}" class="hero__link" {{#if target}}target="{{target}}" {{/if}}><span
                    class="icon-chevron-thin-left"></span> {{link.text}}</a>
            {{/if}}
            <h1 class="hero__title">{{title}}</h1>
            {{#if subtitle}}
            <h2 class="hero__subtitle">{{subtitle}}</h2>
            {{/if}}
            {{#if subline}}
            <p class="hero__subline">{{subline}}</p>
            {{/if}}
            {{#if cta}}
            <div class="hero__cta-container">
                <a class="hero__cta js-hero-cta" href="{{cta.url}}">{{cta.text}}</a>
            </div>
            {{/if}}
        </div>
    </div>

</div>