{{!-- Outer div of card has adjustable padding and margins and optional background image --}}
<div class="responsive-background-image custom-margin-padding custom-min-height
	{{#ifCond mobileMargin '!==' 'custom'}} {{mobileMargin}}{{/ifCond}}
	{{#ifCond paddingMarginMobilePadding '!==' 'custom'}} {{paddingMarginMobilePadding}}{{/ifCond}}
	{{#ifCond paddingMarginDeskMargin '!==' 'custom'}} {{paddingMarginDeskMargin}}{{/ifCond}}
	{{#ifCond paddingMarginDeskPadding '!==' 'custom'}} {{paddingMarginDeskPadding}}{{/ifCond}}"
	{{#ifCond bgcolorimageStyle '==' 'image'}}
		{{#if bgcolorimageMobileImage.src}} data-xs-bg-src="{{bgcolorimageMobileImage.src}}"{{/if}}
		{{#if bgcolorimageDesktopImage.src}} data-md-bg-src="{{bgcolorimageDesktopImage.src}}"{{/if}}
	{{/ifCond}}
	{{#ifCond mobileMargin '==' 'custom'}} data-xs-margin="{{paddingMarginMobileMarginPix}}"{{/ifCond}}
	{{#ifCond paddingMarginMobilePadding '==' 'custom'}} data-xs-padding="{{paddingMarginMobilePaddingPix}}"{{/ifCond}}
	{{#ifCond paddingMarginDeskMargin '==' 'custom'}} data-md-margin="{{paddingMarginDeskMarginPix}}"{{/ifCond}}
	{{#ifCond paddingMarginDeskPadding '==' 'custom'}} data-md-padding="{{paddingMarginDeskPaddingPix}}"{{/ifCond}}
	style="{{#ifCond bgcolorimageStyle '==' 'color'}}{{#if bgcolorimageBackgroundColor}}background-color: {{bgcolorimageBackgroundColor}};{{/if}}{{/ifCond}}
	{{#ifCond paddingMarginLeftRightMarginDisable '==' 'true'}} margin-left: 0!important; margin-right: 0!important;{{/ifCond}}"
	{{#if minimumHeightDesktop}} data-md-min-height="{{minimumHeightDesktop}}"{{/if}}
	{{#if minimumHeightMobile}}data-xs-min-height="{{minimumHeightMobile}}"{{/if}}>

	{{!-- Card top background image or youtube video --}}
	<div class="card-img-wrapper text-center">

		{{!-- wrap cardLinkUrl around the image/video --}}
		{{#if cardLinkUrl}}
			<a href="{{cardLinkUrl}}{{cardLinkAnchor}}" target="{{cardLinkTarget}}"
				{{#ifCond cardLinkTarget '==' '_blank'}} rel="noopener
					{{#ifCond linkAddNoFollow '===' 'true'}} nofollow{{/ifCond}}" {{/ifCond}}
				{{#ifCond cardLinkTarget '==' '_self'}} {{#ifCond linkAddNoFollow '===' 'true'}} rel="nofollow" {{/ifCond}}{{/ifCond}}
					{{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
		{{else}}
			{{#if cardLinkAnchor}}
				<a href="{{cardLinkAnchor}}" target="{{cardLinkTarget}}"
					{{#ifCond cardLinkTarget '==' '_blank'}} rel="noopener
						{{#ifCond linkAddNoFollow '===' 'true'}} nofollow{{/ifCond}}" {{/ifCond}}
					{{#ifCond cardLinkTarget '==' '_self'}} {{#ifCond linkAddNoFollow '===' 'true'}} rel="nofollow" {{/ifCond}}{{/ifCond}}
						{{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
			{{/if}}
		{{/if}}

		{{#ifCond imageOrVideo '==' 'video'}}

			{{#if videoSrc}}
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item lazyload" data-src="{{videoSrc}}" frameborder="0" allowfullscreen></iframe>
				</div>

				{{!-- overlay icon centered on top image/video --}}
				{{#if icon.iconImageRefParam}}
					<div class="card-icon-overlay">
						<img class="lazyload" data-src="{{icon.iconImageRefParam}}" alt="{{iconLabel}}">
						{{#if rolloverText}}
							<p class="rollover view zoom">{{rolloverText}}</p>
						{{/if}}
					</div>
				{{/if}}
			{{/if}}

		{{else}}

			{{#ifCond imageOrVideo '==' 'audio'}}

				<div class="audio-wrapper card-img-top card__img--zoom responsive-background-image"{{!--
				--}}{{#if audio.src}} data-md-bg-src="{{audio.src}}"{{/if}}{{#if audio.srcAudio}} data-xs-bg-src="{{audio.srcAudio}}"{{!--
				--}}{{else}}{{#if image.src}} data-xs-bg-src="{{audio.src}}"{{/if}}{{/if}}>

					{{#if cardAudioUrl}}
					<audio id="aud_{{guid}}" autobuffer controls controlsList="nodownload">
						<source src="{{cardAudioUrl}}" type="audio/mpeg"{{#ifCond linkAddNoFollowAudioUrl '==' 'true'}} rel="nofollow"{{/ifCond}}>{{!--
						--}}Your browser does not support the HTML5 audio element.{{!--
				--}}</audio>
					{{/if}}{{!-- #if cardAudioUrl --}}

					{{#ifCond audio.src '||' audio.srcAudio}}{{!-- display mobile and/or desktop image --}}
						</div>
					{{/ifCond}}

				</div>

				{{#if cardAudioUrl}}
					{{!-- Transcript modal --}}
					<div class="modal transcript-modal fade" id="tm_{{guid}}" tabindex="-1" role="dialog" aria-labelledby="transcriptModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-dialog-centered" role="document">
							<div class="modal-content">

								<div class="modal-header">
									<div class="modal-pre-body">
										{{#if headlineText}}
											<h5 class="card-title" style="{{#if headlineTextColor}}color: {{headlineTextColor}};{{/if}}">{{headlineText}}</h5>
										{{/if}}
										{{#if bodyText}}
											<p class="card-bodyText">{{{bodyText}}}</p>
										{{/if}}
										{{#if richText1}}
											<div class="card-bodyTextStyle card-bodyTextRTE1">{{{richText1}}}</div>
										{{/if}}
										{{#if richText2}}
											<div class="card-bodyTextStyle card-bodyTextRTE2">{{{richText2}}}</div>
										{{/if}}
										{{#if addText}}
											<p class="card-addText">{{{addText}}}</p>
										{{/if}}
									</div>

									<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
										<div class="close-1" aria-hidden="true"{{#if headlineTextColor}} style="color: {{headlineTextColor}};"{{/if}}>&times;</div>
										<div class="close-2">
											<span{{#if headlineTextColor}} style="background-color: {{headlineTextColor}};"{{/if}}> </span>
											<span{{#if headlineTextColor}} style="background-color: {{headlineTextColor}};"{{/if}}> </span>
										</div>
									</button>
								</div>

								<div class="hr"></div>
								<div class="modal-body card-bodyText">{{audioTranscript}}</div>
								<div class="hr"></div>
								<div class="modal-footer"></div>
							</div>
						</div>
					</div>
				{{/if}}{{!-- #if cardAudioUrl --}}
				{{!--  END - #ifCond imageOrVideo '==' 'audio' --}}
			{{else}}

				{{!-- display mobile and/or desktop image --}}
				{{> lazyLoadImage srcImage=image.src srcMobile=mobile.src }}

				{{!-- overlay icon if desktop or mobile image exists --}}
				{{#if image.src}}
					{{#if icon.iconImageRefParam}}
						<div class="card-icon-overlay">
							<img class="lazyload" data-src="{{icon.iconImageRefParam}}" alt="{{iconLabel}}">
							{{#if rolloverText}}
								<p class="rollover view zoom">{{rolloverText}}</p>
							{{/if}}
						</div>
					{{/if}}
				{{else}}
					{{#if mobile.src}}
						{{#if icon.iconImageRefParam}}
							<div class="card-icon-overlay">
								<img class="lazyload" data-src="{{icon.iconImageRefParam}}" alt="{{iconLabel}}">
								{{#if rolloverText}}
									<p class="rollover view zoom">{{rolloverText}}</p>
								{{/if}}
							</div>
						{{/if}}
					{{/if}}
				{{/if}}
			{{/ifCond}}
		{{/ifCond}}
		{{!-- end cardLinkUrl --}}
		{{#ifCond cardLinkUrl '||' cardLinkAnchor}}
			</a>
		{{/ifCond}}
	</div>{{!-- end card-img-wrapper --}}

	{{!-- Card body text and button --}}
	<div class="card-body card-body-style" style="{{#ifCond bgcolorimageStyle '==' 'color'}}{{#if bgcolorimageBackgroundColor}}background-color: {{bgcolorimageBackgroundColor}};{{/if}}{{/ifCond}}">

		{{#if headlineText}}
			<h5 class="card-title {{headlineTextAlignment}}" style="{{#if headlineTextColor}}color: {{headlineTextColor}};{{/if}}{{#if headlineTextSize}} font-size: {{headlineTextSize}}rem;{{/if}}">{{headlineText}}</h5>
		{{/if}}
		{{#if bodyText}}
			<p class="card-bodyText">{{{bodyText}}}</p>
		{{/if}}
		{{#if richText1}}
			<div class="card-bodyTextStyle card-bodyTextRTE1">{{{richText1}}}</div>
		{{/if}}
		{{#if richText2}}
			<div class="card-bodyTextStyle card-bodyTextRTE2">{{{richText2}}}</div>
		{{/if}}
		{{#if addText}}
			<p class="card-addText">{{{addText}}}</p>
		{{/if}}

		{{#if linkLabel}}

			{{!-- Start Button --}}
			{{#ifCond linkType '==' 'download'}}
				{{#if damAsset}}
					<a class="card-cta" href="{{damAsset}}" {{#if forceDownload}}download{{/if}} {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{else}}aria-label="<% Downloads file %>"{{/if}}>
				{{/if}}
			{{/ifCond}}

			{{#ifCond linkType '==' 'pageURL'}}
				<a class="card-cta" href="{{linkUrl}}{{linkAnchor}}" target="{{linkTarget}}"
				{{#ifCond linkTarget '==' '_blank'}} rel="noopener
					{{#ifCond linkConstructAddNoFollow '===' 'true'}} nofollow{{/ifCond}}" {{/ifCond}}
				{{#ifCond linkTarget '==' '_self'}} {{#ifCond linkConstructAddNoFollow '===' 'true'}} rel="nofollow"{{/ifCond}} {{/ifCond}}
					aria-label="{{linkLabel}}">
			{{/ifCond}}

				{{#ifCond damAsset '||' linkUrl}}
					{{#ifCond imageOrVideo '==' 'audio'}}
						<button class="btn{{#ifCond linkType '==' 'download'}} aud btn-download{{else}} btn-primary{{/ifCond}}">
					{{else}}
						<button class="btn btn-primary">
					{{/ifCond}}
				{{else}}
					{{#if linkLabel}}
						<button class="btn btn-primary">
					{{/if}}
				{{/ifCond}}

					{{#ifCond imageOrVideo '==' 'audio'}}
						{{#ifCond linkType '==' 'download'}}
						<span class="icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
								<path id="downloadIcon" data-name="Download Icon" class="cls-1" d="M891.5,2177l-4.4-4.3,0.8-.7,3.6,3.6,3.6-3.6,0.8,0.7Zm-0.5-12h1v10.9h-1V2165Zm6,15H886v-3h1v2h9v-2h1v3Z" transform="translate(-886 -2165)"/>
							</svg>
						</span>{{!--
					--}}{{/ifCond}}{{!--
				--}}{{/ifCond}}{{!--
				--}}{{linkLabel}}

				{{#ifCond damAsset '||' linkUrl}}{{!--
				--}}</button>
				{{else}}
					{{#if linkLabel}}{{!--
					--}}</button>
					{{/if}}
				{{/ifCond}}

			{{#ifCond linkType '==' 'download'}}
				{{#if damAsset}}
					</a>
				{{/if}}
			{{/ifCond}}

			{{#ifCond linkType '==' 'pageURL'}}
				</a>
			{{/ifCond}}

			{{!-- End Button --}}
	 	{{/if}}

		{{#ifCond imageOrVideo '==' 'audio'}}{{!-- Link trigger modal --}}
			{{#if audioTranscript}}
				<p><a href="#" data-toggle="modal" data-target="#tm_{{guid}}" {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{else}}aria-label="<% Opens audio modal %>"{{/if}}>
					<button class="btn aud btn-transcript">
						<span class="icon">
							<svg xmlns="http://www.w3.org/2000/svg" width="19" height="14.93" viewBox="0 0 19 14.93">
								<path id="transcriptIcon" data-name="Transcript Icon" class="cls-1" d="M915.7,2212.82v-3.69h-8.1a1.6,1.6,0,0,1-1.6-1.64v-7.98a1.6,1.6,0,0,1,1.6-1.64h15.8a1.6,1.6,0,0,1,1.6,1.64v7.98a1.6,1.6,0,0,1-1.6,1.64h-3.7Zm-8.1-13.93a0.656,0.656,0,0,0-.6.62v7.98a0.656,0.656,0,0,0,.6.62h9.1v2.46l2.6-2.46h4.1a0.656,0.656,0,0,0,.6-0.62v-7.98a0.656,0.656,0,0,0-.6-0.62H907.6Zm2.9,6.66a2.051,2.051,0,1,1,2-2.05A2.03,2.03,0,0,1,910.5,2205.55Zm0-3.07a1.02,1.02,0,1,0,1,1.02A0.955,0.955,0,0,0,910.5,2202.48Zm5,3.07a2.051,2.051,0,1,1,2-2.05A2.03,2.03,0,0,1,915.5,2205.55Zm0-3.07a1.02,1.02,0,1,0,1,1.02A0.955,0.955,0,0,0,915.5,2202.48Zm5,3.07a2.051,2.051,0,1,1,2-2.05A2.03,2.03,0,0,1,920.5,2205.55Zm0-3.07a1.02,1.02,0,1,0,1,1.02A0.955,0.955,0,0,0,920.5,2202.48Z" transform="translate(-906 -2197.88)"/>
							</svg>
						</span>{{!--
						--}}<%View audio transcript%>{{!--
				--}}</button>
				</a></p>
			{{/if}}
		{{/ifCond}}

	</div>
</div>