{% set defaults = {
	attributes: {},
	image: "",
	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 %}
	<a href="{{self.url}}" class="flex flex-col items-stretch py-10 duration-300 group lg:px-10 hover:shadow-xl">
		<div class="flex w-48 mb-3 mx-auto rounded-full aspect-[1/1] items-center justify-center shadow-2xl transition-colors group-hover:shadow-none">
			{% block cardImage %}
					{% if self.image %}
						{{ svg(self.image.path)|attr({ class: 'h-[50px]' }) }}
					{% endif %}
			{% endblock %}
		</div>
		<div class="flex-1 group-hover:text-gray-700">
			{% block cardContent %}

				<h4 class="heading-4 mt-12 text-center">
					{{ self.heading }}
				</h4>
				<div class="mt-8 text-center copy {{ self.buttonUrl ? "mb-12" }} ">
					{{ self.text }}
				</div>

			{% endblock %}
		</div>
	</a>