{% set image_name = page.header.image %}
{% set image = image_name ? page.media[image_name] : null %}
{% set background_image_name = page.header.background_image %}
{% set background_image = background_image_name ? page.media[background_image_name] : null %}
{% set background = page.header.background|default('light') %}
{% set horizontal_alignment = page.header.horizontal_alignment|default(page.header.alignment)|default('left') %}
{% set vertical_alignment = page.header.vertical_alignment|default('center') %}
{% set overlay = page.header.background_overlay|default('none') %}
{% set overlay_opacity = page.header.overlay_strength|default('40') %}
{% set text_color = page.header.text_color|default('dark') %}
{% set background_position = page.header.background_position|default('center') %}
{% set background_size = page.header.background_size|default('cover') %}
<section id="{{ page.header.anchor|default(page.slug)|e }}"
         class="module-hero spacing-{{ page.header.spacing|default('standard')|e }} bg-{{ background|e }} align-{{ horizontal_alignment|e }} vertical-{{ vertical_alignment|e }} text-{{ text_color|e }}{{ image ? ' has-image' : '' }}{{ background_image ? ' has-background-image' : '' }} overlay-{{ overlay|e }} overlay-strength-{{ overlay_opacity|e }} background-position-{{ background_position|e }} background-size-{{ background_size|e }}{{ page.header.background_parallax ? ' background-parallax' : '' }}"
         {% if background_image %}style="--hero-background-image: url('{{ background_image.url|e('html_attr') }}');"{% endif %}>
    <div class="module-hero-inner">
        <div class="module-hero-content">
            {% if page.header.eyebrow %}<p class="module-eyebrow">{{ page.header.eyebrow|e }}</p>{% endif %}
            <h1>{{ page.header.heading|default(page.title)|e }}</h1>
            {% if page.header.text %}<p class="module-lead">{{ page.header.text|e|nl2br }}</p>{% endif %}
            {% if page.header.primary_label and page.header.primary_url %}
                <div class="module-actions">
                    <a class="btn btn-primary" href="{{ page.header.primary_url|e }}">{{ page.header.primary_label|e }}</a>
                    {% if page.header.secondary_label and page.header.secondary_url %}<a class="btn btn-secondary" href="{{ page.header.secondary_url|e }}">{{ page.header.secondary_label|e }}</a>{% endif %}
                </div>
            {% endif %}
        </div>
        {% if image %}<div class="module-hero-media">{{ image.html(page.header.image_alt|default(''), page.header.image_alt|default(''), 'loading="eager"')|raw }}</div>{% endif %}
    </div>
</section>