<section class="generic-feature-content-panel w-full relative bg-brand-cream-viii">
    <div class="container-wrapper max-w-7xl 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="content-wrapper w-full flex flex-col justify-center items-center gap-4 sm:gap-6 lg:gap-8">
                {% if panel.subheader | length %}
                    <div class="subheader-wrapper w-full flex flex-col justify-center items-center">
                        <span class="font-body text-sm lg:text-base text-brand-gray-i uppercase tracking-wide">
                            {{ panel.subheader }}
                        </span>
                    </div>
                {% endif %}

                {% if panel.header | length %}
                    <div class="header-wrapper w-full flex flex-col justify-center items-center">
                        <h2 class="font-header text-brand-terracotta-aa font-semibold text-3xl lg:text-4xl text-center">
                            {{ panel.header }}
                        </h2>
                    </div>
                {% endif %}

                {% if panel.specialHeader | length %}
                    <div class="special-header-wrapper font-body w-full flex flex-col justify-center items-center">
                        {{ panel.specialHeader }}
                    </div>
                {% endif %}

                {% if panel.paragraph | length %}
                    <div class="paragraph-wrapper w-full max-w-xl mx-auto flex flex-col justify-center items-center">
                        <div class="wysiwyg font-body prose max-w-none lg:prose-lg text-center">
                            {{ panel.paragraph }}
                        </div>
                    </div>
                {% endif %}

                <div class="image-wrapper w-full flex flex-col justify-center items-center">
                    <div class="aspect-wrapper w-full aspect-w-4 aspect-h-3 sm:aspect-w-5 sm:aspect-h-3 lg:aspect-w-5 lg:aspect-h-2 xl:aspect-w-7 xl:aspect-h-2">
                        <div class="image-wrapper w-full rounded-lg lg:rounded-xl overflow-hidden">
                            {% for image in panel.featureImage.all() %}
                                {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                    {
                                        'containerStyles': '!absolute',
                                        'imgStyles': '!w-full !h-full !object-cover !object-center'
                                    }
                                %}
                            {% endfor %}
                        </div>
                    </div>
                </div>

                {% if panel.buttons | length %}
                    <div class="buttons-wrapper w-full flex flex-row justify-center items-center mt-2">
                        {% for button in panel.buttons %}
                            {% include themeDir ~ '/_includes/_modules/_button' with {
                                'buttonType': 'external-link',
                                'buttonText': button.buttonTitle,
                                'href': button.buttonLink,
                                'title': button.buttonTitle,
                                'theme': 'quinary',
                                'newTab': button.newTab,
                                'addClasses': '!w-full sm:!w-auto'
                            } %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>