<header class="page-header {% if hero %} page-header_hero {% endif %}">
  <h1 class="page-header-headline">{{ title | safe }}</h1>

  {% if header.subheadline %}
    <p class="page-header-subheadline">{{ header.subheadline | safe }}<p>
  {% endif %}

  {% if header.headlineCta %}
    <a href="{{ header.headlineCta.link | safe }}" class="page-header-cta">{{ header.headlineCta.text | safe }}</a>
  {% endif %}

  {% if pageImage %}
    <figure class="page-header-image">
      <img
        class="page-header-image-tag"
        src="/img/{{ pageImage.src }}-1920.jpg"
        srcset="
          /img/{{ pageImage.src }}-1024.jpg 1024w,
          /img/{{ pageImage.src }}-1920.jpg 1920w,
          /img/{{ pageImage.src }}-full.jpg full
        "
        sizes="
          (max-width: 1024px) 1024px,
          (max-width: 1920px) 1920px,
          100vw
        "
        alt="{{ pageImage.description }}"
      >
      <figcaption class="page-header-image-description">{{ pageImage.description }}</figcaption>
    </figure>
  {% endif %}
</header>
