{% set defaults = {
	theme: attribute(themes, "blue")|default,
	classes: [],
	heading: "",
	cards: [],
	cardType: "generic",
	cycleColours: false,
} %}

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

{% if self.heading|default %}

<div class="relative mt-20 mb-8 outer-container">
	<div class="container flex items-center mx-auto ">
		<h2 class="px-4 font-medium leading-tight tracking-tight text-blue type-c">{{ self.heading|default }}</h2>
	</div>
</div>

{% endif %}

<div class="relative outer-container{{ self.classes|length ? " #{self.classes|join(' ')}" }}">



		{% block listingHeader %}
			<div class="absolute inset-x-0 top-0 z-0 hidden w-full mt-56 rounded-lg bg-gradient-b-light-blue lg:mt-48 xl:mt-56 md:block md:pb-3/4 lg:pb-1/2 xl:pb-2/5"></div>
		{% endblock %}

		<div class="grid grid-cols-1 mt-12 lg:grid-cols-3 xl:mt-16">


			{% for item in self.cards %}
				{% include "cards/#{self.cardType}" with {
					item: item,
					loop: loop,
				} %}
			{% endfor %}

			{% block afterLoop %}{% endblock %}

		</div>

</div>