{%- macro card(title, content, url) -%}
{%- set card_classes = resolve_class({
	'p-6': card_size == 'Small',
	'p-7': card_size == 'Medium',
	'p-8': card_size == 'Large'
}) -%}
{%- set title_classes = resolve_class({
	'text-base': card_size == 'Small',
	'text-lg md:text-xl': card_size == 'Medium',
	'text-xl md:text-2xl': card_size == 'Large'
}) -%}
{%- set content_classes = resolve_class({
	'text-sm': card_size == 'Small',
	'text-base': card_size == 'Medium',
	'text-base xxl:text-lg': card_size == 'Large'
}) -%}

<a href="{{ url or '#' }}"
	class="block bg-white border rounded-xl hover:shadow-lg {{ card_classes }}">
	<h3 class="font-semibold {{ title_classes }}">{{ title }}</h3>
	<p class="mt-4 text-gray-900 {{ content_classes }}">{{ content or '' }}</p>
</a>
{%- endmacro -%}

{%- if title -%}
<h2 class="text-xl font-bold sm:text-2xl md:text-3xl">{{ title }}</h2>
{%- endif -%}
{%- if subtitle -%}
<p class="mt-2 text-base text-gray-900 sm:text-lg max-x-4xl">{{ subtitle }}</p>
{%- endif -%}
{%- set card_size = card_size or 'Small' -%}
{%- set classes = resolve_class({
	'mt-8': title,
	'sm:grid-cols-2 lg:grid-cols-4': card_size == 'Small',
	'sm:grid-cols-2 lg:grid-cols-3': card_size == 'Medium',
	'sm:grid-cols-2': card_size == 'Large',
}) -%}
<div class="grid grid-cols-1 gap-4 md:gap-6 xl:gap-8 {{ classes }}">
	{%- for index in ['1', '2', '3', '4', '5', '6', '7', '8'] -%}
	{%- set title = values['card_' + index + '_title'] -%}
	{%- set content = values['card_' + index + '_content'] -%}
	{%- set url = values['card_' + index + '_url'] -%}
	{%- if title -%}
	{{ card(title, content, url) }}
	{%- endif -%}
	{%- endfor -%}
</div>