<section class="container py-16 xl:py-24">
    <h1 class="heading-0 text-blue">The Common Questions</h1>
    <section class="grid grid-cols-1 gap-12 mt-12 lg:grid-cols-5 xl:mt-16 xl:gap-16 xxl:gap-20">
        <article class="lg:col-span-3">
            <p class="copy-lg">Your questions answered.</p>

            {% set globalFAQ = globalFAQ.globalFAQ %}

            {% import 'macros' as macros %}
            <div class="mt-8 xl:mt-12">
                {% for item in globalFAQ.all() %}
                {% set title = item.accordionTitle|default %}
                {% set body =  item.accordionBody|default %}
                    <details class="block group relative after:content-[''] after:absolute after:top-0 after:inset-x-0 after:h-px after:w-full after:block hover:after:scale-y-[2] after:bg-imperial after:transition-all">
                        <summary class="[list-style:none]">
                            <div class="flex items-center justify-between py-7 xxxl:py-8">
                                <h2 class="copy-lg flex-1 text-black cursor-pointer" id="{{ title }}-header">
                                    {{ title|raw }}
                                </h2>
                                <div class="relative w-4 h-4 transition-all group-open:rotate-90">
                                    <span class="absolute top-0 w-px h-4 -translate-x-1/2 left-1/2 bg-grey-70">
                                    </span>
                                    <span class="absolute left-0 w-4 h-px transition-all -translate-y-1/2 top-1/2 bg-grey-70 group-open:opacity-0">
                                    </span>
                                </div>
                            </div>
                        </summary>
                        <div class="pb-7 xxxl:pb-8 type-base richtext" >
                            {{ body|raw }}
                        </div>
                    </details>
                {% endfor %}
            </div>
        </article>
        <article class="lg:col-span-2">
            <h3 class="type-5xl text-imperial"> Ask a different question </h3>
            <div class="mt-8 xl:mt-12">
                {% set form =
                    craft.formie.forms({
                    handle: 'askQuestions'
                    }).one()
                    %}
                    {{ craft.formie.renderForm(form) }}
            </div>
        </article>
    </section>
</section>