---
span:
  '0': 'row-span-2 md:col-span-1'
  '1': 'row-span-1 md:col-span-2'
  '2': 'row-span-1 md:col-span-1'
  '3': 'row-span-2 md:col-span-1'
  '4': 'row-span-2 md:col-span-2'
  '5': 'row-span-1 md:col-span-1'
---

<div
    class="relative overflow-hidden max-md:h-72 {{ view:span[index] }} {{ if index > 5  }} col-span-3 {{ /if }} group">
    <x-link-wrapper link="{{ link }}" target_blank="{{ target_blank }}">
        {{ partial:components/picture cover="true" class="absolute -z-10" }}
        {{ if title || rich_text }}
            <div class="p-6 h-full">
                {{ if title }}
                    <x-heading size="h5" class="group-hover:text-primary-700">{{ title }}</x-heading>
                {{ /if }}
                {{ if rich_text }}
                    <x-richtext>
                        {{ rich_text }}
                    </x-richtext>
                {{ /if }}
            </div>
        {{ /if }}
    </x-link-wrapper>
</div>