{{# Set defaults for variables #}}
{{ this_link = (this_link ?: "") }}
{{ target = (target ?: "_self") }}
{{# Sort out the link and target for the button #}}
{{ if (link_type == "url") }}
    {{ this_link = "{{ link }}" }}
{{ elseif (link_type == "collection") }}
    {{ this_link = "{{ page_story:url }}" }}
{{ elseif (link_type == "download") }}
    {{ this_link = "{{ download }}" }}
    {{ target = "_blank" }}
{{ /if }}
{{ if set_type === 'icon' }}
    <a
        class="group relative flex h-full w-full flex-col items-start self-stretch rounded-lg bg-white pb-4"
        href="{{ this_link }}"
        {{ if target }}target="{{ target }}"{{ /if }}
    >
        <div class="flex w-full max-w-33 self-center p-3" style="color: {{ icon_color }}">
            {{ icon }}
        </div>
        <div class="flex h-full flex-1 flex-col items-start gap-8 self-stretch p-4 text-center">
            {{ partial:card/heading class="lg:group-hover:underline" }}
                {{ heading }}
                {{ if !call_to_action }}→{{ /if }}
            {{ /partial:card/heading }}
            <span class="self-stretch text-copy text-brand-gray-mid lg:text-copy-lg">{{ subheading }}</span>
            {{ if call_to_action }}
                {{ partial:card/link-text class="{{ ['self-center' => set_type === 'icon'] | classes }} mt-auto" }}
                    {{ call_to_action_text }}
                    →
                {{ /partial:card/link-text }}
            {{ /if }}
        </div>
    </a>
{{ else }}
    <a
        class="group relative flex h-full flex-col items-start self-stretch rounded-lg bg-white shadow-[0_2px_2px_0] shadow-black/5 outline outline-1 outline-black/5 hover:bg-brand-white-hover"
        href="{{ this_link }}"
        {{ if target }}target="{{ target }}"{{ /if }}
    >
        {{ if set_type === 'image' }}
            <div
                class="relative w-full overflow-hidden rounded-tl-lg rounded-tr-lg bg-cover bg-center bg-no-repeat pb-[56.5%]"
                style="background-image: url({{ image:url }})"
                role="img"
                aria-label="{{ image:alt }}"
            ></div>
        {{ /if }}
        <div class="flex h-full flex-1 flex-col gap-4 self-stretch p-4">
            {{ partial:card/heading }}
                {{ heading }}
                {{ if !call_to_action }}→{{ /if }}
            {{ /partial:card/heading }}
            <span class="self-stretch text-copy text-brand-gray-mid lg:text-copy-lg">{{ subheading }}</span>
            {{ if call_to_action }}
                {{ partial:card/link-text class="mt-auto" }}
                    {{ call_to_action_text }}
                    →
                {{ /partial:card/link-text }}
            {{ /if }}
        </div>
    </a>
{{ /if }}