<section class="generic-quotes-panel w-full relative bg-white-pure">
    <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="grid-wrapper w-full flex flex-col justify-start items-start gap-2 sm:gap-4 lg:gap-6">
                {% for quote in panel.quotes %}
                    <div class="card-wrapper bg-white-pure w-full flex flex-col lg:grid lg:grid-cols-12 justify-start items-start lg:items-center relative p-4 sm:p-6 lg:p-2 lg:gap-8 xl:gap-10 rounded-xl sm:rounded-2xl lg:rounded-3xl border-2 lg:border-3 border-solid border-brand-terracotta-i">
                        {% if quote.image.one() | length %}
                            <div class="image-wrapper-desktop h-full hidden lg:flex flex flex-col justify-start items-start lg:col-span-4 xl:col-span-3">
                                <div class="asset-wrapper lg:bg-brand-cream-viii w-full h-full overflow-hidden rounded-xl lg:rounded-2xl">
                                    {% for image in quote.image.all() %}
                                        {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                            {
                                                'imgStyles': '!w-full !h-full !object-cover !object-center'
                                            }
                                        %}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        <div class="content-wrapper w-full h-full lg:px-8 xl:px-10 lg:py-10 xl:py-16 flex flex-col justify-start items-start lg:col-span-8 xl:col-span-9">
                            <div class="quote-wrapper prose-lg lg:prose-2xl max-w-none font-body">
                                {{ quote.quote }}
                            </div>
                            <div class="extras-wrapper w-full flex flex-row justify-start items-center mt-6 sm:mt-8 lg:mt-10">
                                {% if quote.image.one() | length %}
                                    <div class="asset-wrapper lg:hidden lg:bg-brand-cream-viii w-10 sm:w-12 h-10 sm:h-12 mr-4 sm:mr-6 overflow-hidden rounded-xl lg:rounded-2xl border-2 border-solid border-brand-terracotta-i">
                                        {% for image in quote.image.all() %}
                                            {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                                {
                                                    'imgStyles': '!w-full !h-full !object-cover !object-center'
                                                }
                                            %}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="details-wrapper flex flex-col justify-start items-start">
                                    <span class="font-body text-lg lg:text-xl font-medium leading-none text-black-primary">
                                        {{ quote.author }}
                                    </span>
                                    {% if quote.position | length %}
                                    <span class="font-body lg:text-lg mt-1 lg:mt-2 leading-none text-mintyy-gray-vii">
                                            {{ quote.position }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>