<section class="generic-faq-panel w-full relative bg-brand-cream-viii">
    <div class="container-wrapper max-w-6xl 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">
            {% if panel.header | length %}
                <div class="header-wrapper w-full flex flex-col justify-center items-center">
                    <h2 class="font-body text-3xl lg:text-4xl">
                        {{ panel.header }}
                    </h2>
                </div>
            {% endif %}
            <div class="table-wrapper w-full bg-brand-cream-viii flex flex-col justify-start items-start overflow-hidden{{ panel.header | length ? ' mt-6 lg:mt-8' : '' }}">
                {% for faq in panel.faqs %}
                    {% if faq.faqQuestion | length and faq.faqAnswer | length %}
                        <div class="faq-group-wrapper w-full flex flex-col justify-start items-start border-b border-mintyy-gray-iv border-solid last:border-0 sm:first:-mt-4 lg:first:-mt-6">
                            <button class="faq-question-wrapper w-full flex flex-row justify-between items-center py-4 lg:py-6" title="Click to toggle the dropdown">
                                <span class="font-body text-lg text-brand-terracotta-aa">
                                    {{ faq.faqQuestion }}
                                </span>
                                <span class="plus-icon-wrapper text-lg font-body w-4 h-4 flex justify-center items-center">
                                    <span class="sr-prompt sr-only">Click to open FAQ answer</span>
                                    <span class="plus-icon flex justify-center items-center transition-transform duration-300">
                                        <span class="w-4 h-px absolute bg-black-primary"></span>
                                        <span class="vertical-axis w-4 h-px absolute rotate-90 origin-center bg-black-primary"></span>
                                    </span>
                                </span>
                            </button>
                            <div class="faq-answer-wrapper w-full bg-brand-cream-viii hidden">
                                <div class="answer prose max-w-none pb-4 pt-2 lg:pb-6 lg:pt-3">
                                    {{ faq.faqAnswer }}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</section>