Image Card: Large

<a class="w-full h-full block transition ease-in-out duration-300 hover:shadow-xl group rounded-2xl overflow-hidden relative {% if backgroundColour %} bg-grey-50 {% else %} 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 {% endif %}" href="{{ link | path }}">
    <div class="{% if not backgroundColour %} absolute {% else %} flex flex-col h-full justify-between {% endif %} text-white w-full p-7 bottom-0 z-20 {%if large %}lg:px-12{% endif %}">
        <div>
            <div class="flex-2 flex gap-5 justify-between items-end">
                <h2 class="{% if backgroundColour %}text-grey-700 {% else %} text-white {% endif %} font-bold block {%if large %} text-xl md:text-4xl {%else %} text-xl md:text-2xl {% endif %}">{{ heading }}</h2>
                {% if not backgroundColour %}
                    <div class="w-8 h-8">
                        <div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
                            <div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
                                <div class="w-full h-full justify-center flex items-center flex-shrink-0">
                                    <div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
                                        {% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
                                    </div>
                                </div>
                                <div class="w-full h-full justify-center flex items-center flex-shrink-0">
                                    <div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
                                        {% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
            {% if description and backgroundColour %}
                <p class="text-xl mt-3 leading-tight {% if backgroundColour %}text-grey-600 {% else %} text-white {% endif %}">{{ description }}</p>
            {% endif %}   
        </div>
        {% if description and backgroundColour %}
            <div class="flex w-full justify-end">
                <div class="w-8 h-8">
                    <div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
                        <div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
                            <div class="w-full h-full justify-center flex items-center flex-shrink-0">
                                <div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
                                    {% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
                                </div>
                            </div>
                            <div class="w-full h-full justify-center flex items-center flex-shrink-0">
                                <div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
                                    {% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
    {% if not backgroundColour %}
        {% 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' } %}
    {% endif %}
</a>