{{# 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 }}
<div class="mx-auto w-full max-lg:max-w-(--breakpoint-md)">
    <a
        href="{{ this_link }}"
        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-1 outline-black/5 hover:bg-brand-white-hover focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:outline-offset-2 focus-visible:outline-white"
        {{ if target }}target="{{ target }}"{{ /if }}
    >
        <div
            class="column-content flex w-full flex-col self-center rounded-lg focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white max-lg:max-w-(--breakpoint-md) lg:flex-row! lg:items-start"
        >
            <div
                class="flex min-h-32 shrink-0 flex-col justify-center overflow-hidden rounded-tl-lg rounded-tr-lg bg-cover bg-center bg-no-repeat pb-[56.5%] lg:h-full lg:min-h-full lg:w-1/3 lg:rounded-tr-none lg:rounded-bl-lg lg:pb-0"
                style="background-image: url(&quot;{{ image:url }}&quot;); min-height: 250px"
                role="img"
                aria-label="{{ image:alt }}"
            ></div>
            <div class="flex flex-1 items-center p-4 lg:h-full lg:w-2/3">
                <div class="flex flex-col justify-center gap-6">
                    {{ 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 | nl2br }}
                    </span>
                    {{ if call_to_action }}
                        {{ partial:card/link-text class="mt-auto" }}
                            {{ call_to_action_text }}
                            →
                        {{ /partial:card/link-text }}
                    {{ /if }}
                </div>
            </div>
        </div>
    </a>
</div>