Home Feature: Default

<div class="home_feature{% if cta %} home_feature_has_cta{% endif %}{% if text_bg %} home_feature_text_bg{% endif %}" style="--gradient-before: {{ gradient_before }}; --gradient-after: {{ gradient_after }}">
	<div class="home_feature_inner">
		<div class="home_feature_media">
			<figure class="home_feature_figure">
				{% include '@partial-picture' with {
					class: 'home_feature',
					image: page.image,
					alt: '',
					loading: 'eager',
					default: img.portraitFull.xsml,
					sources: {
						'1220px': img.wide.xlrg,
						'980px': img.wide.lrg,
						'740px': img.full.med,
						'500px': img.square.sml
					}
				} %}
			</figure>
			{% if page.video %}
			{% set video_options = {
				display: "background",
				id: page.video,
				type: "vimeo",
				title: page.title
			} %}
			<div class="js-background-video-wrapper home_feature_video" data-background-video='{{ video_options|json_encode }}'>
				<div class="home_feature_video_iframe_wrap">
					<div class="home_feature_video_iframe_target js-iframe-target"></div>
				</div>
				<div class="home_feature_video_controls">
					{% render '@partial-button' with {
						class: 'page_header_bg_video_play',
						title: 'Play Video',
						icon: 'play',
						js: true
					} %}
					{% render "@partial-button" with {
						class: 'page_header_bg_video_pause',
						title: 'Pause Video',
						icon: 'pause',
						js: true
					} %}
				</div>
			</div>
			{% endif %}
		</div>
		<div class="home_feature_content">
			<div class="fs-row">
				<div class="fs-cell{% if cta %} fs-lg-8 fs-xl-9{% endif %}">
					<div class="home_feature_content_inner">
						<h1 class="home_feature_title"><span class="home_feature_title_span">{{ heading }}</span></h1>
						{% if link %}
							{% include '@partial-link' with {
								class: 'home_feature',
								title: link.label,
								url: link.url
							} %}
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
	{# NOTE: CTA fields should be conditional on video NOT being present #}
	{% if cta %}
	<div class="home_feature_cta theme_{{ cta.theme }}">
		<div class="home_feature_cta_inner">
			<figure class="home_feature_cta_figure">
				{% include '@partial-image' with {
					class: 'home_feature_cta',
					alt: '',
					image: cta.image,
					loading: 'eager',
					sources: [
						img.classic.med,
						img.classic.sml,
						img.classic.xsml,
						img.classic.xxsml
					]
				} %}
			</figure>
			<div class="home_feature_cta_wrapper">
				<span class="home_feature_cta_location">{{ cta.location }}</span>
				<a href="#" class="home_feature_cta_title_link">{{ cta.title }}</a>
				{% if cta.description %}
				<span class="home_feature_cta_description">{{ cta.description }}</span>
				{% endif %}
			</div>
		</div>
	</div>
	{% endif %}
</div>