Call To Action: Default

{#
	{% include '@component-call-to-action' with {
		title: 'Title',
		description:
			'Description',
		items: [
			{
				title: 'Title',
				description: 'Description',
				link: {
					title: 'Link Text',
					url: '#',
					target: '',
					aria: '',
				},
				image: '1',
				alt: '',
			},
		]
	} %}
#}

{% set carousel_json = {
	align: 'center',
	watchDrag: true,
	containScroll: false,
	duration: 40,
	plugins: ['fade'],
	breakpoints: {
		'(min-width: 980px)': { watchDrag: false }
	}
}|json_encode %}

{% set themes = [
	['accent', 'accent_filled'],
	['blue', 'white'],
	['spirit_blue', 'default'],
] %}

{% set uuid_viewport = uniqid("cta-viewport") %}

<!-- Call to Action -->
<div class="cta theme_accent">
	<div class="fs-row">
		<div class="fs-cell">
			{% if title or description %}
				<div class="cta_header">
					{% if title %}
						<h2 class="cta_title">{{ title }}</h2>
					{% endif %}

					{% if description %}
						<p class="cta_description">{{ description }}</p>
					{% endif %}
				</div>
			{% endif %}

			<div class="cta_body">
				<div class="cta_body_inner">
					{% if items|length > 1 %}
						<div class="cta_carousel_wrapper embla embla__default-controls js-carousel-embla" data-carousel-embla='{{ carousel_json }}'>
							<div
								id="{{ uuid_viewport }}"
								class="cta_carousel_inner embla__viewport js-carousel-embla-viewport"
							>
								<ul class="cta_list embla__container js-carousel-embla-container">
						{% endif %}

						{% for item in items %}

							{% if items|length > 1 %}
								<li class="cta_item theme_{{ themes[loop.index0 % themes|length][0] }} embla__slide">
							{% else %}
								<div class="cta_wrapper theme_{{ themes[0][0] }}">
									<div class="cta_item">
							{% endif %}

							<div class="cta_item_inner">
								<figure class="cta_item_figure cta_item_figure_sm">
									{% include "@partial-image" with {
										class: 'cta_item',
										image: item.image,
										alt: item.alt,
										loading: 'lazy',
										crop: 'square',
										max: 'sml',
										sizes: [
											'(min-width: 780px) calc(-4.44vw + 681px)',
											'(min-width: 380px) calc(92.89vw - 59px)',
											'calc(31.67vw + 161px)',
										]
									} %}
								</figure>

								<div class="cta_item_content">
									{% if title %}
										<h3 class="cta_item_title">{{ item.title }}</h3>
									{% else %}
										<h2 class="cta_item_title">{{ item.title }}</h2>
									{% endif %}

									{% if item.description %}
										<p class="cta_item_description">{{ item.description }}</p>
									{% endif %}

									{% if item.link %}
										{% include "@partial-link-button" with {
											class: 'cta_item',
											title: item.link.title,
											url: item.link.url,
											target: item.link.target,
											aria: item.link.aria,
											theme: themes[loop.index0 % themes|length][1],
										} %}
									{% endif %}
								</div>

								<figure class="cta_item_figure cta_item_figure_lg">
									{% include "@partial-image" with {
										class: 'cta_item',
										image: item.image,
										alt: item.alt,
										loading: 'lazy',
										crop: 'square',
										max: 'sml',
										sizes: [
											'(min-width: 1400px) 627px',
											'(min-width: 1220px) 543px',
											'(min-width: 980px) 456px',
										]
									} %}
								</figure>
							</div>

							{% if items|length > 1 %}
								</li>
							{% else %}
									</div>
								</div>
							{% endif %}
						{% endfor %}

						{% if items|length > 1 %}
								</ul>
							</div>
							<div class="cta_controls embla__controls" aria-controls="{{ uuid_viewport }}">
								<button class=" embla__button embla__button--prev js-carousel-embla-btn-prev" type="button" aria-label="Previous Slide">
									<span class="embla__button-icon">{{ icon('caret_left') }}</span>
								</button>

								<button class=" embla__button embla__button--next js-carousel-embla-btn-next" type="button" aria-label="Next Slide">
									<span class="embla__button-icon">{{ icon('caret_right') }}</span>
								</button>
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->