Image Card: Large

<a class="block transition ease-in-out duration-300 hover:shadow-xl group rounded-md overflow-hidden relative before:h-[80%] before:opacity-60 before:bg-gradient-to-t before:from-black before:to-transparent before:w-full before:bottom-0 before:left-0 before:absolute  before:z-10" href="{{ link | path }}">
    <div class="absolute text-white w-full p-7 bottom-0 z-20 {%if large %}lg:px-12{% endif %}">
        <div class="flex items-end">
            <div class="w-8/12">
                <h2 class=" text-white font-bold block leading-none {%if large %}text-5xl md:text-7xl{%else %}text-3xl md:text-3xl{% endif %}">{{ heading }}</h2>
                {% if description and large %}
                    <p class="hidden md:block text-xl mt-2 leading-tight">{{ description }}</p>
                {% endif %}
            </div>
        </div>
    </div>
    {% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: image.width, height: image.height, xsmMax: image.xsmMax, smMax: image.smMax, mdMax: image.mdMax, modifier: 'transition ease-in-out duration-300 group-hover:scale-110' } %}
</a>