<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
  {% if background_img %}
    {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%}
  <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" alt="">
  {% endif -%}
  <div class="hero-body pl-0 pr-0">
    <div class="container has-text-centered  {% if background_transparent %}is-transparent{% endif %}">
      <div class="box is-radiusless">
        <h1 class="title is-1 mb-5">
          {% if page.extra.title.image -%}
            <figure>
              <img src="{{ get_url(path=page.extra.title.image) }}" alt="{{ title | default(value=page.title) | safe }}" />
            </figure>
          {% else -%}
            {{ title | default(value=page.title) | safe }}
          {% endif %}
        </h1>
        {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}
      </div>
    </div>
  </div>
</section>