{% if page_header_config.style == "easy" %}
    <div class="px-4 space-y-4 bg-insight-surface md:px-16">
        <div class="pt-20 pb-12 mx-auto max-w-4xl">
            {% include "insight_ui/components/_page_header_content.html" %}
        </div>
    </div>
{% elif page_header_config.style == "docs" %}
    <div class="px-4 border-t-8 border-insight-primary md:px-16">
        <div class="pt-20 pb-12 mx-auto space-y-4 max-w-4xl border-b-2 border-insight-surface">
            {% include "insight_ui/components/_page_header_content.html" %}
        </div>
    </div>
{% elif page_header_config.style == "fancy" %}
    <div class="primary-back relative px-4 overflow-hidden md:px-16">
        <div class="pt-20 pb-12 mx-auto space-y-4 max-w-4xl">
            {% include "insight_ui/components/_page_header_content.html" %}
        </div>
        <div aria-hidden="true" class="-z-10 -translate-x-1/2 absolute top-0 left-1/2 blur-3xl">
            <div
                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
                class="aspect-4/1 w-400 bg-linear-to-tr from-insight-primary to-insight-primary/50 opacity-70"
            ></div>
        </div>
    </div>
{% else %}
    <div class="px-4 border-t-8 border-insight-primary md:px-16">
        <div class="pt-20 pb-12 mx-auto space-y-4 max-w-4xl border-b-2 border-insight-surface">
            {% include "insight_ui/components/_page_header_content.html" %}
        </div>
    </div>
{% endif %}