{% set image = page.media[page.header.image] ?: page.media.images|first %}
{% set title = page.title|raw %}
{% set subtitle = page.header.subtitle|raw %}

<section id="banner">
  <div class="content">
    <header>
      <h2>{{ title}}</h2>
      {% if subtitle %}
        <p>{{ 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 image %}
    <span class="image object fit">
      {{image.loading('lazy').html(title,title)|raw}}
    </span>
  {% endif %}
</section>