<section class="generic-image-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 p-2 lg:p-3 flex flex-col lg:grid lg:grid-cols-12 justify-start items-start lg:items-center gap-2 sm:gap-4 lg:gap-10 xl:gap-16 xl:gap-20 2xl:gap-24 rounded-xl sm:rounded-2xl lg:rounded-3xl border-2 lg:border-3 border-solid border-brand-terracotta-i">
                <div class="image-wrapper w-full h-full flex  flex-col justify-start items-start lg:col-span-6{{ panel.alignment ? ' lg:order-last' }}">
                    <div class="border-wrapper w-full h-full flex flex-col justify-start items-start rounded-lg lg:rounded-xl overflow-hidden">
                        {% for image in panel.image.all() %}
                            {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                {
                                    'imgStyles': '!w-full !h-full !object-cover !object-center'
                                }
                            %}
                        {% endfor %}
                    </div>
                </div>
                <div class="content-wrapper w-full h-full flex flex-col justify-start lg:justify-center items-start lg:items-center lg:col-span-6">
                    <div class="inner-wrapper w-full p-6 sm:p-8 lg:p-10 flex flex-col justify-start items-start">
                        {% if panel.subheader | length %}
                            <span class="font-body text-sm lg:text-base text-brand-gray-i uppercase tracking-wide">
                                {{ panel.subheader }}
                            </span>
                        {% endif %}
                        <h2 class="font-header text-brand-terracotta-aa font-semibold text-3xl lg:text-4xl{{ panel.subheader | length ? ' mt-2 lg:mt-3' }}">
                            {{ panel.header }}
                        </h2>
                        <div class="wysiwyg font-body prose max-w-none lg:prose-lg mt-3 lg:mt-4">
                            {{ panel.paragraph }}
                        </div>
                        {% if panel.buttons | length and panel.buttons[0].buttonText | length %}
                            <div class="buttons-wrapper w-full flex flex-row justify-start items-start mt-6 lg:mt-8">
                                {% for button in panel.buttons %}
                                    {% include themeDir ~ '/_includes/_modules/_button' with {
                                        'buttonType': 'external-link',
                                        'buttonText': button.buttonText,
                                        'href': button.buttonLink,
                                        'title': button.buttonText,
                                        'theme': 'quinary',
                                        'newTab': button.newTab,
                                        'addClasses': '!w-full sm:!w-auto'
                                    } %}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>