Inspire Rows

{#
	{% include '@component-inspire-rows' with {
		group_label: 'Group Label',
		group_title: 'Group Title',
		group_subtitle: 'Group Subtitle',
		group_description:"<p>Group Description</p>",
		items: [
			{
				title: 'Item Title',
				image: '1',
				alt: '',
				url: '#'
			}
		]
	} %}
#}

<!-- Inspire Rows -->
<div class="inspire_rows">
	{% for row in rows %}
		<div class="inspire_row type_{{ row.type }}">
			{% if row.type == 'cards' %}
				<div class="inspire_cards">
					<div class="fs-row">
						<div class="fs-cell">
							<div class="inspire_cards_inner">
								{% for item in row.items %}
									<div class="inspire_item inspire_item_{{ item.type }}">
										{% if item.type == 'news' %}
											<div class="inspire_news">
												<a class="inspire_news_link" href="{{ item.url }}" aria-label="{{ item.title }}">
													<div class="inspire_news_media">
														<figure class="inspire_news_figure">
															{% if loop.length < 4 and loop.index == 1 %}
																{% include '@partial-image' with {
																	class: 'inspire_news',
																	alt: item.alt,
																	image: item.image,
																	loading: 'lazy',
																	sources: [
																		img.classic.med,
																		img.classic.sml,
																		img.classic.xsml,
																		img.classic.xxsml
																	],
																	sizes: [
																		"(min-width: 980px) 32vw",
																		"(min-width: 600px) 49vw",
																		"98vw"
																	]
																} %}
															{% else %}
																{% include '@partial-image' with {
																	class: 'inspire_news',
																	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) 17vw",
																		"(min-width: 1220px) 15vw",
																		"(min-width: 980px) 20vw",
																		"(min-width: 600px) 49vw",
																		"98vw"
																	]
																} %}
															{% endif %}
														</figure>
													</div>
													<div class="inspire_news_wrapper">
														<div class="inspire_news_header">
															<h2 class="inspire_news_title">{{ item.title }}</h2>
														</div>
														<div class="inspire_news_action">
															<span class="inspire_news_action_link_label">Read Story</span><span class="icon_nowrap inspire_news_action_link_icon" aria-hidden="true">&#xfeff;{{ icon('arrow_right') }}</span>
														</div>
													</div>
												</a>
											</div>
										{% elseif item.type == 'testimonial' %}
											<div class="inspire_testimonial theme_{{ item.color }}">
												<figure class="inspire_testimonial_figure">
													<blockquote class="inspire_testimonial_quote">
														<p><span class="inspire_testimonial_quote_open">&ldquo;</span>{{ item.quote }}</p>
													</blockquote>
													<figcaption class="inspire_testimonial_figcaption">
														<span class="inspire_testimonial_name">{{ item.name }}</span>
														{% if item.job_title %}
															<span class="inspire_testimonial_title">{{ item.job_title }}</span>
														{% endif %}
													</figcaption>
												</figure>
											</div>
										{% elseif item.type == 'work' %}
											<div class="inspire_work">
												<a class="inspire_work_link" href="{{ item.url }}" aria-label="{{ item.title }}">
													<div class="inspire_work_media">
														<figure class="inspire_work_figure">
															{% if loop.length < 4 and loop.index == 1 %}
																{% include '@partial-image--no-crop' with {
																	class: 'inspire_work',
																	alt: item.alt,
																	image: item.image,
																	loading: 'lazy',
																	sizes: [
																		"(min-width: 980px) 32vw",
																		"(min-width: 600px) 49vw",
																		"98vw"
																	]
																} %}
															{% else %}
																{% include '@partial-image--no-crop' with {
																	class: 'inspire_work',
																	alt: item.alt,
																	image: item.image,
																	loading: 'lazy',
																	sizes: [
																		"(min-width: 1394px) 17vw",
																		"(min-width: 1220px) 15vw",
																		"(min-width: 980px) 20vw",
																		"(min-width: 600px) 49vw",
																		"98vw"
																	]
																} %}
															{% endif %}
														</figure>
													</div>
													<div class="inspire_work_wrapper">
														<div class="inspire_work_header">
															<h2 class="inspire_work_title">
																<span class="inspire_work_title_label">{{ item.title }},</span> <span class="inspire_work_title_year">{{ item.year }}</span>
															</h2>
															<p class="inspire_work_name">{{ item.name }}</p>
														</div>
														<div class="inspire_work_action">
															<span class="inspire_work_action_link_label">View Artwork</span><span class="icon_nowrap inspire_work_action_link_icon" aria-hidden="true">&#xfeff;{{ icon('arrow_right') }}</span>
														</div>
													</div>
												</a>
											</div>
										{% endif %}
									</div>
								{% endfor %}
							</div>
						</div>
					</div>
				</div>
			{% elseif row.type == 'statement' %}
				<div class="inspire_statement">
					<div class="fs-row">
						<div class="fs-cell">
							<div class="inspire_statement_inner">
								<p class="inspire_statement_label">{{ row.statement }}</p>
							</div>
						</div>
					</div>
				</div>
			{% elseif row.type == 'work' %}
				<div class="inspire_feature">
					<a class="inspire_feature_link" href="{{ row.url }}" aria-label="{{ row.title }}">
						<div class="inspire_feature_media">
							<figure class="inspire_feature_figure">
								{% include '@partial-image' with {
									class: 'inspire_feature',
									alt: row.alt,
									image: row.image,
									loading: 'lazy',
									sources: [
										img.wide.xlrg,
										img.wide.lrg,
										img.wide.med,
										img.wide.sml,
										img.wide.xsml,
										img.wide.xxsml
									],
									sizes: [
										'100vw'
									]
								} %}
							</figure>
						</div>
						<div class="inspire_feature_wrapper">
							<div class="fs-row">
								<div class="fs-cell">
									<div class="inspire_feature_wrapper_inner">
										<div class="inspire_feature_header">
											<h2 class="inspire_feature_title">
												<span class="inspire_feature_title_label">{{ row.title }},</span> <span class="inspire_feature_title_year">{{ row.year }}</span>
											</h2>
											<p class="inspire_feature_name">{{ row.name }}</p>
										</div>
										<div class="inspire_feature_action">
											<span class="inspire_feature_action_link_label">View Artwork</span><span class="icon_nowrap inspire_work_action_link_icon" aria-hidden="true">&#xfeff;{{ icon('arrow_right') }}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			{% endif %}
		</div>
	{% endfor %}
</div>
<!-- END: Inspire Rows -->