<section id="banner">
    <div class="content">
        <header>
            <h2>{{ page.title}}</h2>
            {% if page.header.subtitle %}
                <p>{{ page.header.subtitle }}</p>
            {% endif %}
        </header>

        {{page.content|raw}}
        
        <ul class="actions">
            <li><a href="{{page.header.buttonurl}}" class="button">{{page.header.buttontext}}</a></li>
        </ul>
    </div>
    {% if page.header.image %}
        <span class="image object fit">
            {{page.media[page.header.image].loading('lazy').html('',page.title)|raw}}
        </span>
    {% else %}
        <span class="image object fit">
            {{page.media[page.header.primaryImage].loading('lazy').html('',page.title)|raw}}
        </span>
    {% endif %}
</section>
