Whats On Card

{% set id = uniqid('whats-on-card') %}
<article class="whats_on_card color_{{ color }}" aria-labelledby="{{ id }}-title">
	<figure class="whats_on_card_figure">
		<a class="whats_on_card_figure_link" aria-labelledby="{{ id }}-title" href="{{ event.link }}" tabindex="-1">
			{% include "@partial-image" with {
				class: 'whats_on_card',
				image: event.image,
				alt: '',
				sources: [
					img.wide.sml,
					img.wide.xsml,
					img.wide.xxsml
				],
				loading: 'lazy',
				sizes: [
					'(min-width: 1420px) 431px',
					'(min-width: 1220px) 376px',
					'(min-width: 980px) 297px',
					'(min-width: 740px) 221px',
					'(min-width: 380px) calc(47.65vw - 26px)',
					'321px',
				]
			} %}
		</a>
	</figure>
	<div class="whats_on_card_content">
		<h3 class="whats_on_card_title" id="{{ id }}-title">
			<a href="{{ event.link }}" class="whats_on_card_title_link">
				{{ event.title }}
			</a>
		</h3>
		<p class="whats_on_card_label">{{ label }}</p>
		{% if event.program or event.tickets or event.free %}
			<div class="whats_on_card_meta">
				{% if event.program %}
					<p class="whats_on_card_program">{{ event.program }}</p>
				{% endif %}
				{% if event.tickets %}
					<p class="whats_on_card_tickets">
						<span class="whats_on_card_tickets_icon" aria-hidden="true">
							{{ icon('ticket') }}
						</span>
						<span class="whats_on_card_tickets_label">
							Ticketed
						</span>
					</p>
				{% elseif event.free %}
					<p class="whats_on_card_tickets">
						<span class="whats_on_card_tickets_icon" aria-hidden="true">
							{{ icon('info') }}
						</span>
						<span class="whats_on_card_tickets_label">
							Free Entry
						</span>
					</p>
				{% endif %}
			</div>
		{% endif %}

		{% if event.date %}
			<time datetime="{{ event.date|date('c') }}" class="whats_on_card_date">
				{{ event.date|date('F j') }} &bull; {{ event.date|date('g:iA') }}
			</time>
		{% endif %}

		{% if event.location %}
			<div class="whats_on_card_location">
				<span class="whats_on_card_location_icon" aria-hidden="true">
					{{ icon('location') }}
				</span>
				<span class="whats_on_card_location_label">
					{{ event.location }}
				</span>
			</div>
		{% endif %}
	</div>
</article>