{% set numCols = 0 %}
{% for entry in panel.entries %}
    {% 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 = 'md:grid md:grid-cols-2' %}
{% endif %}

<section class="generic-entries-grid-panel w-full relative">
    <div class="container-wrapper mx-auto {{ numCols == 1 ? 'max-w-5xl' : 'max-w-7xl' }}">
        <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 entry in panel.entries %}
                    <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 }}">
                        <div class="image-wrapper w-full relative flex flex-col justify-start items-start{{ numCols == 1 ? ' md:h-full' : '' }}">
                            <div class="aspect-wrapper w-full aspect-w-4 aspect-h-3 sm:aspect-w-5 sm:aspect-h-3 {{ numCols == 1 ? 'md:aspect-none md:h-full' : 'xl:aspect-w-7 xl:aspect-h-4' }}">
                                {% if entry.seoFacebookThumbnail.one() | length %}
                                    {% for image in entry.seoFacebookThumbnail.all() %}
                                        {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                            {
                                                'alt': entry.seoFacebookThumbnail.alt | length ? entry.seoFacebookThumbnail.alt : '',
                                                'containerStyles': numCols == 1 ? 'md:!w-full md:h-full !absolute' : '!absolute',
                                                'imgStyles': numCols == 1 ? 'md:!w-full !h-full !object-cover !object-cente' : '!h-full !object-cover !object-cente',
                                            }
                                        %}
                                    {% endfor %}
                                {% else %}
                                    <img src="" data-src="{{ staticImagesUrl }}webp/search-thumbnail-backup.jpg.webp" alt="A photo of a living room and kitchen, all accessible to a wheelchair user." class="w-full h-full object-cover object-center lazyload" />
                                {% endif %}
                            </div>
                        </div>
                        <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 entry.title | length %}
                                        <h2 class="font-header text-brand-terracotta-aa font-semibold text-2xl lg:text-3xl">
                                            {{ entry.title }}
                                        </h2>
                                    {% endif %}
                                    {% if entry.description | length %}
                                        <div class="wysiwyg font-body prose max-w-none lg:prose-lg mt-3 lg:mt-4">
                                            {{ entry.description }}
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="buttons-wrapper w-full flex flex-row justify-start items-start mt-6">
                                    {% include themeDir ~ '/_includes/_modules/_button' with {
                                        'buttonType': 'internal-link',
                                        'buttonText': 'Keep Reading',
                                        'href': entry.url,
                                        'title': 'Keep Reading about ' ~ entry.title,
                                        'theme': 'quinary',
                                        'addClasses': '!w-full sm:!w-auto'
                                    } %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>