Topic Card: Default

{#
	{% include '@partial-topic-card' with {
		item: {
			type: 'default',
			image: '1',
			alt: 'alt',
			title: 'Title',
			description: 'Description',
			link: {
				url: '#',
				label: 'Link Label'
			}
		}
	} %}
#}

<!-- Topic Card -->
<div class="card card_topic card_type_{{ item.type ?: 'default' }}">
	<div class="card_inner card_topic_inner">
		<div class="card_topic_grid">
			<div class="card_topic_group">
				<div class="card_topic_header">
					{% if group_title %}
						<h3 class="card_topic_title">{{ item.title }}</h3>
					{% else %}
						<h2 class="card_topic_title">{{ item.title }}</h2>
					{% endif %}
				</div>
				<div class="card_topic_body">
					<p class="card_topic_description">{{ item.description }}</p>
				</div>
				{% if item.link %}
					<div class="card_topic_action">
						<a class="card_topic_link" href="{{ item.link.url }}">{{ item.link.label }}</a>
					</div>
				{% endif %}
			</div>
			<div class="card_topic_media">
				<figure class="card_topic_figure">
					{% include '@partial-image' with {
						class: 'card_topic',
						alt: item.alt,
						image: item.image,
						loading: 'lazy',
						sources: [
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						],
						sizes: [
							'(min-width: 1394px) 290px',
							'(min-width: 1220px) 265px',
							'(min-width: 980px) 250px',
							'(min-width: 600px) 332px',
							'90vw'
						]
					} %}
				</figure>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Card -->