{% set numCols = 0 %}
{% for column in panel.columns %}
    {% set numCols = numCols + 1 %}
{% endfor %}

<section class="generic-feature-trio-panel w-full relative bg-white-pure">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="padding-wrapper relative w-full flex flex-col justify-start lg:justify-center items-start lg:items-center px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12 xl:py-16 {{ not ( panel.buttons | length and panel.buttons[0].buttonTitle | length ) ? ' pb-18 sm:pb-20 lg:pb-22 xl:pb-24' }}">
            <div class="background-line-decoration w-[calc(100%-1.5rem)] md:w-[calc(100%-2rem)] h-[calc(100%-7rem)] md:h-[calc(100%-8rem)] lg:md:h-[calc(100%-9rem)] xl:md:h-[calc(100%-11rem)] absolute inset-x-[0.75rem] md:inset-x-[1rem] inset-y-[3rem] md:inset-y-[3.5rem] lg:inset-y-[4.25rem] xl:inset-y-[5.25rem] border xl:border-2 border-solid border-mintyy-gray-ii rounded-lg lg:rounded-xl xl:rounded-2xl"></div>
            <div class="heading-wrapper relative w-full flex flex-col justify-center items-center">
                <h2 class="font-header bg-white-pure px-6 lg:px-8 xl:px-16 text-brand-terracotta-aa font-semibold text-3xl lg:text-4xl">
                    {{ panel.header }}
                </h2>
            </div>
            <div class="content-wrapper relative w-full flex flex-col justify-start items-start mt-8 sm:mt-10 lg:mt-12 gap-8 sm:gap-10 lg:grid-cols-{{ numCols }} {{ numCols > 1 ? ' md:grid md:grid-cols-2' }}">
                {% for column in panel.columns %}
                    <div class="column w-full {{ column.buttons | length and column.buttons[0].buttonTitle | length ? 'lg:h-full' }} flex flex-col justify-start items-start {{ numCols > 2 ? ' md:last:col-span-2 lg:last:col-span-1' }}{{ numCols > 1 ? '' }}">
                        {% if column.image | length %}
                            <div class="image-wrapper w-full relative flex flex-col justify-start items-start rounded-lg lg:rounded-xl overflow-hidden">
                                <div class="aspect-wrapper w-full aspect-w-4 aspect-h-3 sm:aspect-w-5 sm:aspect-h-3 xl:aspect-w-7 xl:aspect-h-5">
                                    {% for image in column.image.all() %}
                                        {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                            {
                                                'containerStyles': '!absolute',
                                                'imgStyles': '!w-full !h-full !object-cover !object-center'
                                            }
                                        %}
                                    {% endfor %}
                                </div>
                                {% if column.pill | length %}
                                    <div class="pill-wrapper absolute top-4 left-4">
                                        <div class="pill relative px-6 pt-2 pb-[0.675rem] bg-white-primary rounded-full">
                                            <span class="font-body text-sm lg:text-base">
                                                {{ column.pill }}
                                            </span>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        <div class="content-wrapper w-full h-full flex flex-col justify-start items-start mt-4">
                            <div class="padding-wrapper w-full h-full p-6 lg:p-8 flex flex-col justify-between items-start">
                                <div class="content-wrapper w-full flex flex-col justify-start items-start">
                                    {% if ( not column.image | length ) and ( column.pill | length ) %}
                                        <div class="pill-wrapper relative mb-4">
                                            <div class="pill relative px-6 pt-2 pb-[0.675rem] bg-white-primary rounded-full border-solid border-2 border-mintyy-gray-i">
                                                <span class="font-body text-sm lg:text-base">
                                                    {{ column.pill }}
                                                </span>
                                            </div>
                                        </div>
                                    {% endif %}
                                    <h2 class="font-header text-brand-terracotta-aa font-semibold text-2xl lg:text-3xl">
                                        {{ column.header }}
                                    </h2>
                                    <div class="wysiwyg font-body prose max-w-none lg:prose-lg mt-3 lg:mt-4">
                                        {{ column.paragraph }}
                                    </div>
                                </div>
                                {% if column.buttons | length and column.buttons[0].buttonTitle | length %}
                                    <div class="buttons-wrapper w-full flex flex-row justify-start items-start mt-6">
                                        {% for button in column.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>
                {% endfor %}
            </div>
            {% if panel.buttons | length and panel.buttons[0].buttonTitle | length %}
                <div class="buttons-wrapper relative w-full lg:w-auto lg:bg-white-pure lg:px-8 xl:px-16 flex flex-row justify-start md:justify-center items-start md:items-center mt-6">
                    {% set loopIndex = 0 %}
                    {% for button in panel.buttons %}
                        {% set loopIndex = loopIndex + 1 %}
                        {% for buttonLink in button.buttonLink %}
                            {% if buttonLink.type.handle == 'internalLink' %}
                                {% include themeDir ~ '/_includes/_modules/_button' with {
                                    'buttonType': 'internal-link',
                                    'buttonText': button.buttonTitle,
                                    'href': buttonLink.buttonLink.one().url,
                                    'title': button.buttonTitle,
                                    'theme': loopIndex == 2 ? 'secondary' : 'primary',
                                    'addClasses': '!w-full sm:!w-auto'
                                } %}
                            {% elseif buttonLink.type.handle == 'externalLink' %}
                                {% include themeDir ~ '/_includes/_modules/_button' with {
                                    'buttonType': 'external-link',
                                    'buttonText': button.buttonTitle,
                                    'href': buttonLink.buttonLink,
                                    'title': button.buttonTitle,
                                    'theme': loopIndex == 2 ? 'secondary' : 'primary',
                                    'addClasses': '!w-full sm:!w-auto'
                                } %}
                            {% elseif buttonLink.type.handle == 'download' %}
                                {% include themeDir ~ '/_includes/_modules/_button' with {
                                    'buttonType': 'download',
                                    'buttonText': button.buttonTitle,
                                    'href': buttonLink.buttonLink.one().url,
                                    'title': button.buttonTitle,
                                    'theme': loopIndex == 2 ? 'secondary' : 'primary',
                                    'download': true,
                                    'addClasses': '!w-full sm:!w-auto'
                                } %}
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</section>