{% set numCards = 0 %}
{% set numColumns = 0 %}
{% for card in panel.cards %}
    {% set numCards = numCards + 1 %}
{% endfor %}
{% set numColumns = numCards > 2 ? 3 : numCards %}

<section data-test="{{ numColumns }}" class="generic-team-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:pb-12 lg:pt-24 xl:pb-16 xl:pt-24">
            <div class="columns-wrapper w-full relative flex flex-col justify-start items-start gap-4 lg:gap-6{{ numColumns > 2 ? ' sm:grid sm:grid-cols-2 lg:grid-cols-3' : numColumns > 1 ? ' sm:grid sm:grid-cols-2' }}">
                {% for card in panel.cards %}
                    <div class="card-wrapper bg-brand-cream-viii w-full h-full flex flex-col justify-center items-center relative p-2 lg:p-3 rounded-xl sm:rounded-2xl lg:rounded-3xl border-2 lg:border-3 border-solid border-brand-terracotta-i{{ ( loop.index + 1 ) % 3 == 0 ? '  lg:-translate-y-6 xl:-translate-y-8' }}">
                        {% if card.headshot.one() | length %}
                            <div class="image-wrapper w-full flex flex-col justify-start items-start overflow-hidden rounded-xl lg:rounded-2xl">
                                <div class="asset-wrapper w-full aspect-w-6 aspect-h-7">
                                    {% for image in card.headshot.all() %}
                                        {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                            {
                                                'containerStyles': '!absolute',
                                                'imgStyles': '!w-full !h-full !object-cover !object-center'
                                            }
                                        %}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        <div class="content-wrapper w-full px-4 py-6 sm:py-8 lg:py-10 flex flex-col justify-center items-center">
                            {% if card.personPosition | length %}
                                <span class="font-body text-center text-sm lg:text-base font-medium text-mintyy-gray-v">
                                    {{ card.personPosition }}
                                </span>
                            {% endif %}
                            <span class="font-body text-center text-3xl lg:mt-1 text-brand-terracotta-aa font-semibold">
                                {{ card.personName }}
                            </span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>