Home Feature: Campaign

<div class="home_feature{% if feature %} home_feature_with_card{% endif %}">
	<div class="home_feature_wrapper">
		<div class="home_feature_media">
			<figure class="home_feature_figure_mobile">
				{% include '@partial-picture' with {
					class: 'home_feature',
					image: page.image,
					alt: '',
					loading: 'eager',
					default: img.portraitFull.xsml,
					sources: {
						'740px': img.full.med,
						'500px': img.square.sml
					}
				} %}
			</figure>
			<figure class="home_feature_figure">
				{% if page.video %}
				<img class="home_feature_figure_preview" src="https://images.fastspot.com/washington-national-cathedral/300x200/{{ page.image }}" alt="" />
				{% endif %}
				{% include '@partial-picture' with {
					class: 'home_feature',
					image: page.image,
					alt: '',
					loading: 'eager',
					default: img.classic.lrg,
					sources: {
						'1220px': img.classic.xlrg,
						'980px': img.classic.lrg,
					}
				} %}
			</figure>
			{% if page.video %}
				{% set video_options = {
					display: "background",
					id: page.video,
					type: "vimeo",
					title: page.title,
					autoplay: true
				} %}
				<div class="js-background-video-wrapper page_header_bg_video" data-background-video='{{ video_options|json_encode }}'>
					<div class=" page_header_bg_video_iframe_wrap">
						<div class=" page_header_bg_video_iframe_target js-iframe-target"></div>
					</div>

					<div class="page_header_bg_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_body">
			<div class="fs-row">
				<div class="fs-cell fs-lg-8 fs-xl-8 fs-xxl-7">
					<div class="home_feature_body_inner">
						<h1 class="home_feature_title">{% if title %}<span class="home_feature_title_heading">{{ title }}</span>{% endif %} {{ heading }}{% if heading_2 %} <span class="home_feature_heading_2">{{ heading_2 }}</span>{% endif %}</h1>
						{% if intro %}
						<span class="home_feature_intro">{{ intro }}</span>
						{% endif %}
						{% if goal %}
						<div class="home_feature_progress_bar{% if goal.progress / goal.complete * 100 > 96 %} so_close{% endif %}{% if goal.progress / goal.complete * 100 > 74 %} last_quarter{% endif %}{% if goal.progress / goal.complete * 100 < 21 %} start{% endif %}{% if goal.progress / goal.complete * 100 > 79 %} end{% endif %}{% if goal.progress / goal.complete * 100 >= 60 and goal.progress / goal.complete <= 74 %} mid{% endif %}">
							{% set percentage = goal.progress / goal.complete * 100 %}
							<div class="home_feature_progress_bar_labels">
								<span class="home_feature_progress_bar_title">Our Progress</span>
								<span class="home_feature_progress_bar_progress">{{ percentage|number_format }}%<span> of </span></span>
								<span class="home_feature_progress_bar_goal">${{ goal.complete }} {{ goal.units }}</span>
							</div>
							<div class="home_feature_progress_bar_fill" style="--percent: {{ goal.progress / goal.complete * 100 }}%">
								<span class="home_feature_progress_bar_fill_value" aria-hidden="true">{{ percentage|number_format }}%</span>
							</div>
						</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
	{% if feature %}
	<div class="home_feature_card">

		<div class="fs-row home_feature_card_row">
			<div class="fs-cell fs-lg-4 fs-lg-push-8 home_feature_card_cell">

				<div class="home_feature_card_inner">
					<figure class="home_feature_card_figure">
						{% include '@partial-picture' with {
							class: 'home_feature_card',
							image: feature.image,
							alt: '',
							loading: 'eager',
							default: img.square.xxsml,
							sources: {
								'980px': img.square.sml,
								'740px': img.wide.sml,
								'500px': img.classic.xsml
							}
						} %}
					</figure>
					<div class="home_feature_card_body">
						<div class="home_feature_card_body_inner">
							{% if feature.label %}
							<span class="home_feature_card_label">{{ feature.label }}</span>
							{% endif %}
							<h2 class="home_feature_card_title">
								{% if feature.url %}
								<a href="{{ feature.url }}" class="home_feature_card_title_link">{{ feature.title }}</a>
								{% else %}
								{{ feature.title }}
								{% endif %}
							</h2>
							{% if feature.date or feature.type %}
							<span class="home_feature_card_meta">
								{% if feature.date %}
									<span class="home_feature_card_date">{{ icon("clock") }} {{ feature.date }}</span>
								{% endif %}
								{% if feature.type %}
									<span class="home_feature_card_type">{{ icon("tv") }} {{ feature.type }}</span>
								{% endif %}
							</span>
							{% endif %}
							{% if feature.video %}
							<div class="home_feature_card_button_wrapper">
								<button class="home_feature_card_video_button js-lightbox" href="{{ feature.video }}" data-url="{{ feature.video }}" data-mobile-url="{{ feature.video }}" data-crop="wide" data-autoplay="1" data-lightbox-group="feature-video">Play Video</button>
							</div>
							{% endif %}
						</div>
					</div>
				</div>

			</div>
		</div>

	</div>
	{% endif %}
</div>