{#
Variables:
- member: a Matrix "Team Member" entry (fields: memberName, role, image)
- index: 0-based loop index
#}
{% set memberImage = member.image.one() %}

{# Cycle through the 6 clothespin PNGs #}
{% set clothespinIndex = (index % 6) + 1 %}
{% set clothespinIndex2 = ((index + 3) % 6) + 1 %}

{# Alternate slight rotations for an organic hanging feel #}
{% set rotations = [4, 0, -4, 4, 0, -4, 4, 0] %}
{% set rotation = rotations[index % 8] %}

<div class="@container flex flex-col items-center gap-s" style="transform: rotate({{ rotation }}deg);">

    <div class=" relative pt-l">

        <img src="/assets/graphics/Clothespin {{ clothespinIndex }}.png" alt=""
            class="absolute top-[-15cqw] md:top-[-20cqw] left-1/8 -translate-x-1/2 z-10 w-[10cqw] rotate-[-5deg]"
            aria-hidden="true">

        <img src="/assets/graphics/Clothespin {{ clothespinIndex2 }}.png" alt=""
            class="absolute top-[-15cqw] md:top-[-20cqw] left-7/8 -translate-x-1/2 z-10 w-[10cqw]  rotate-[5deg]"
            aria-hidden="true">

        {# Polaroid frame #}
        <div class="bg-white p-xs dropshadow ">
            <div class="aspect-square overflow-hidden relative bg-indigo">
                {% if memberImage %}
                {# Grayscale photo blended against the indigo bg for a duotone look #}
                <img src="{{ memberImage.url }}" alt="{{ member.memberName }}"
                    class="w-full h-full object-cover grayscale mix-blend-luminosity">
                {% endif %}
            </div>
            <div class="pt-m">
                {% if member.role %}
                <p class="text--2 lg:text--1">{{
                    member.role }}
                </p>
                {% endif %}
                {% if member.memberName %}
                <p class="h3 lg:h4 xl:h3">{{ member.memberName
                    }}</p>
                {% endif %}
            </div>
        </div>

    </div>

    {# Caption: role (small) above name (larger) #}

</div>