{% load static wagtailimages_tags %}
{% if page.header_image or page.header_color_class %}
  {% image page.header_image fill-1200x350 as bg_img %}
  <div class="design-system-hero{% if page.header_large %} design-system-hero-large{% endif %}{% if page.header_darken %} design-system-background-dark{% endif %}"
       style="{% if page.header_image %}background-image: {% if page.header_darken %}linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),{% endif %}url({{ bg_img.url }});
              {% elif page.header_color_class %}background-color: var(--background-alt-{{ page.header_color_class }});
              {% endif %} min-height: 350px">
    {% if page.header_with_title or page.header_cta_link and page.header_cta_label %}
      <div class="design-system-container design-system-py-14w">
        <div class="design-system-grid-row design-system-grid-row--gutters">
          <div class="design-system-col design-system-col-12{% if not page.header_large %}design-system-col-md-6{% endif %}">
            {% if page.header_with_title %}
              <h1 {% if block.value.large %}class="design-system-display--sm"{% endif %}>{{ page.title }}</h1>
            {% endif %}
            {% if page.header_cta_text %}<p>{{ page.header_cta_text }}</p>{% endif %}
            {% if page.header_cta_link and page.header_cta_label %}
              <a class="design-system-btn {% if page.header_darken %}design-system-btn--secondary design-system-background-alt--blue-france design-system-btn--lg{% else %}design-system-btn--primary{% endif %} design-system-btn--lg"
                 href="{{ page.header_cta_link }}">{{ page.header_cta_label }}</a>
            {% endif %}
          </div>
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}
