<section class="generic-animated-gallery-panel w-full relative bg-brand-cream-viii">
    {% if panel.header | length or panel.paragraph | length %}
        <div class="top-wrapper w-full relative">
            <div class="container-wrapper max-w-7xl mx-auto">
                <div class="padding-wrapper px-6 sm:px-8 lg:px-10 pt-8 sm:pt-10 lg:pt-12 xl:pt-16 2xl:pt-24">
                    <div class="content-wrapper w-full flex flex-col justify-center items-center">
                        {% if panel.header | length %}
                            <h2 class="font-body text-3xl lg:text-4xl text-brand-terracotta-aa font-semibold text-center">
                                {{ panel.header }}
                            </h2>
                        {% endif %}
                        {% if panel.paragraph | length %}
                            <div class="wysiwyg w-full max-w-lg font-body prose lg:prose-lg text-center{{ panel.header | length ? ' mt-6 lg:mt-8' }}">
                                {{ panel.paragraph }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="bottom-wrapper w-full relative overflow-hidden">
        <div class="padding-wrapper py-8 sm:py-10 lg:py-12 xl:py-16 2xl:py-24">
            <div class="gallery-wrapper w-full flex flex-row justify-center items-center">
                <div class="generic-animated-gallery-slideshow generic-animated-gallery-glide glide overflow-visible 1.5xl:!overflow-hidden hover:cursor-move">
                    <div class="glide__track !overflow-visible 1.5xl:!overflow-hidden" data-glide-el="track">
                        <div class="glide__slides">
                            {% for card in panel.gallery.all() %}
                                <div class="glide__slide">
                                    <div class="card w-full">
                                        <div class="aspect-wrapper w-full aspect-w-3 aspect-h-4">
                                            {% for image in card.image.all() %}
                                                {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                                    {
                                                        'containerStyles': '!absolute rounded-xl',
                                                        'imgStyles': '!h-full !object-cover !object-center'
                                                    }
                                                %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>