<section class="generic-form-panel w-full relative bg-white-primary">
    <div class="container-wrapper max-w-{{ panel.containerSize }} mx-auto">
        <div class="padding-wrapper px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12 xl:py-16">
            <div class="grid-wrapper w-full flex flex-col justify-start items-start">
                {% if panel.header | length %}
                    <div class="header-wrapper w-full flex flex-col justify-start items-start">
                        <h2 class="font-body text-brand-terracotta-aa font-bold text-3xl lg:text-4xl">
                            {{ panel.header }}
                        </h2>
                    </div>
                {% endif %}
                {% if panel.paragraph | length %}
                    <div class="paragraph-wrapper w-full flex flex-col justify-start items-start{{ panel.header | length ? ' mt-4 lg:mt-6' : '' }}">
                        <div class="prose lg:prose-lg max-w-none font-body">
                            {{ panel.paragraph }}
                        </div>
                    </div>
                {% endif %}
                <div class="form-wrapper w-full flex flex-col justify-start items-start{{ (panel.header | length or panel.paragraph | length) ? ' mt-6 lg:mt-8' : '' }}">
                    {{ panel.form.render({
                        overrideValues: {
                            pageTitle: entry.title
                        }
                    }) }}
                </div>
            </div>
        </div>
    </div>
</section>