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

{% set columnClasses = '' %}
{% if numCols >= 8 %}
    {% set columnClasses = 'md:first:border-t-0 md:[&:nth-child(2)]:border-t-0 md:even:border-l-2 lg:[&:nth-child(3)]:border-t-0 lg:border-l-2 lg:first:border-l-0 lg:[&:nth-child(4)]:border-l-0 lg:[&:nth-child(7)]:border-l-0 xl:[&:nth-child(-n+4)]:border-b-2 xl:border-t-0 xl:border-r-0 xl:border-l-2 xl:[&:nth-child(5)]:border-l-0 xl:[&:nth-child(4)]:border-l-2 xl:[&:nth-child(7)]:border-l-2 lg:last:col-span-2 xl:last:col-span-1' %}
{% elseif numCols >= 7 %}
    {% set columnClasses = 'md:first:border-t-0 md:[&:nth-child(2)]:border-t-0 md:even:border-l-2 lg:[&:nth-child(3)]:border-t-0 lg:border-l-2 lg:first:border-l-0 lg:[&:nth-child(4)]:border-l-0 lg:[&:nth-child(6)]:border-l-0 xl:[&:nth-child(-n+4)]:border-b-2 xl:border-t-0 xl:border-r-0 xl:border-l-2 xl:[&:nth-child(5)]:border-l-0 xl:[&:nth-child(4)]:border-l-2 xl:[&:nth-child(6)]:border-l-2 md:last:col-span-2 lg:[&:nth-child(2n+5)]:col-span-2 xl:[&:nth-child(1n+5)]:!col-span-1 xl:last:!col-span-2' %}
{% elseif numCols >= 6 %}
    {% set columnClasses = 'md:first:border-t-0 md:[&:nth-child(2)]:border-t-0 md:even:border-l-2 lg:[&:nth-child(3)]:border-t-0 lg:border-l-2 lg:first:border-l-0 lg:[&:nth-child(4)]:border-l-0 xl:[&:nth-child(-n+4)]:border-b-2 xl:border-t-0 xl:border-r-0 xl:border-l-2 xl:[&:nth-child(5)]:border-l-0 xl:[&:nth-child(4)]:border-l-2 xl:[&:nth-child(6)]:border-l-2 xl:[&:nth-child(1n+5)]:col-span-2' %}
{% elseif numCols >= 5 %}
    {% set columnClasses = 'md:first:border-t-0 md:[&:nth-child(2)]:border-t-0 md:even:border-l-2 lg:[&:nth-child(3)]:border-t-0 lg:border-l-2 lg:first:border-l-0 lg:[&:nth-child(4)]:border-l-0 xl:[&:nth-child(-n+3)]:border-b-2 xl:border-t-0 xl:border-r-0 xl:border-l-2 xl:[&:nth-child(4)]:border-l-0 xl:[&:nth-child(5)]:border-l-2 md:col-span-1 md:last:col-span-2 lg:col-span-1 xl:[&:nth-child(3)]:col-span-2 xl:[&:nth-child(1n+4)]:col-span-2' %}
{% elseif numCols >= 4 %}
    {% set columnClasses = 'md:first:border-t-0 md:[&:nth-child(2)]:border-t-0 md:even:border-l-2 xl:border-t-0 xl:border-l-2 xl:first:border-l-0 lg:even:col-span-2 xl:col-span-1 xl:even:col-span-1' %}
{% elseif numCols >= 3 %}
    {% set columnClasses = 'md:first:border-t-0 md:[&:nth-child(2)]:border-t-0 md:even:border-l-2 lg:border-t-0 lg:border-l-2 lg:first:border-l-0 md:last:col-span-2 lg:last:col-span-1' %}
{% elseif numCols >= 2 %}
    {% set columnClasses = 'md:border-t-0 md:last:border-l-2 md:first:border-0' %}
{% elseif numCols >= 1 %}
    {% set columnClasses = '' %}
{% endif %}

<section class="resource-grid-panel w-full relative">
    <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-start items-start lg:grid-cols-{{ numCols > 2 ? '3' : '' }} xl:grid-cols-{{ numCols > 3 ? '4' : '' }} rounded-lg lg:rounded-xl overflow-hidden border-2 border solid border-brand-terracotta-i{{ numCols > 1 ? ' md:grid md:grid-cols-2' }}">
                {% for column in panel.columns %}
                    <div class="column w-full h-full flex flex-col justify-start items-start border-t-2 first:border-0 border-solid border-brand-terracotta-i{{ ' ' ~ columnClasses }}">
                        {% if column.image | length %}
                            <div class="image-wrapper w-full relative flex flex-col justify-start items-start">
                                <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-4">
                                    {% 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">
                            <div class="padding-wrapper w-full h-full p-4 lg:p-6 flex flex-col justify-between items-start">
                                <div class="content-wrapper w-full flex flex-col justify-start items-start">
                                    {% if column.pill | length and ( not column.image | length ) %}
                                        <div class="pill-wrapper relative mb-3 lg:mb-4">
                                            <div class="pill relative px-6 pt-2 pb-[0.575rem] bg-brand-cream-viii rounded-full border border-solid border-brand-terracotta-iii">
                                                <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>
        </div>
    </div>
</section>