{% set defaults = {
	attributes: {},
	iconFallback: false,
	heading: "",
	subheading: "",
	text: "",
	buttonUrl: "",
	buttonText: 'Read more',
	buttonTarget: false,
	buttonicon: "outline/chevron-right",
	id: random(1,1000),
} %}

{% set self = defaults|merge(self) %}

{% import 'macros' as macros %}
{% import 'macros/images' as imageMacros %}

	<{%- if self.url -%}
	a
	href="{{ self.url }}"
	{{ macros.addAttributes(self.attributes) }}
	{%- else -%}
		div
	{%- endif %} class="shadow-lg rounded-lg flex flex-col min-h-full{{ self.url ? " group" }}">

		<div class="relative overflow-hidden rounded-t-lg pb-3/4 ">
			{% block cardImage %}
				{% if self.image %}
					{{ imageMacros.imagerSrcset(
						self.image,
						'card',
						{ classes: "absolute h-full w-full", isBackground: true })
					}}
				{% endif %}
				<div class="absolute z-10 w-full h-full transition bg-blue-500 opacity-0 group-hocus:opacity-50"></div>
			{% endblock %}
		</div>
		<div class="flex flex-col items-start flex-grow p-8 bg-white rounded-b-lg">
			{% block cardContent %}
				<h3 class="w-full mb-4 font-medium leading-normal tracking-tight text-blue-700 type-d group-hocus:text-blue-600">{{ self.heading }}</h3>
				{% if self.subheading|default %}
					<span class="block w-full mb-6 font-medium leading-snug tracking-widest text-gray-700 uppercase type-sm">{{ self.subheading }}</span>
				{% endif %}
				<p class="w-full {{ self.buttonUrl ? "mb-12" }} font-normal leading-relaxed text-gray-800 type-base">
					{{ self.text }}
				</p>

				{% if self.buttonUrl %}
					<div class="mt-auto">
						{% include "partials/button" with {
							self: {
								isSnug: true,
								isCard: self.url ? false : true,
								url: self.url ? null : self.buttonUrl,
								text: self.buttonText,
								target: self.buttonTarget,
							}
						} %}
					</div>
				{% endif %}
			{% endblock %}
		</div>

	</{{ self.url ? 'a' : 'div'}}>