{{!-- 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}}>
	<div class="row">
		{{!-- left side --}}
		<div class="col-sm-12 col-md-6">
			{{!-- Card top background image or youtube video --}}
			<div class="card-img-wrapper text-center">
				{{!-- wrap link 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 headlineText}}aria-label="{{headlineText}}"{{else}}aria-label="<% Opens link %>"{{/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}}"{{else}}aria-label="<% Links to anchor %>"{{/if}}>
					{{/if}}
				{{/if}}

				{{#ifCond imageOrVideo '==' 'image'}}{{!-- if mobile image exists --}}
					{{> lazyLoadImage srcImage=image.src srcMobile=mobile.src }}

					{{#if image.src}}
						{{#if icon.iconImageRefParam}}
							<div class="card-icon-overlay lazyload">
								<img class="lazyload" data-src="{{icon.iconImageRefParam}}" alt="{{iconLabel}}" data-object-id="{{dataObjectIdIcon}}">
								{{#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 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}}

				{{/ifCond}}

				{{!-- end link2 --}}
				{{#if cardLinkUrl}}
					</a>
				{{else}}
					{{#if cardLinkAnchor}}
						</a>
					{{/if}}
				{{/if}}

				{{#ifCond imageOrVideo '==' 'audio'}}
					<div class="audio-wrapper">
						{{> lazyLoadImage srcImage=audio.src srcMobile=audio.srcAudio }}

						{{#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 --}}

					</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 --}}

				{{/ifCond}}{{!--  END - #ifCond imageOrVideo '==' 'audio' --}}

			</div>
		</div>

		{{!-- right side --}}

		<div class="col-sm-12 col-md-6">
			<div style="width: 100%; height: 100%;{{#ifCond bgcolorimageStyle '==' 'color'}}{{#if bgcolorimageBackgroundColor}} background-color: transparent !important;{{/if}}{{/ifCond}}" class="bg-white">

				{{!-- Card body text and button --}}
				<div class="card-body card-body-style card-vertical-center">
					{{#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'}}
					  {{#ifCond linkUrl '||' linkAnchor}}
						<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}}
						 {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
					  {{/ifCond}}
					{{/ifCond}}

						{{#ifCond damAsset '||' linkUrl}}
							{{#ifCond imageOrVideo '==' 'audio'}}
								<button
									class="btn{{#ifCond linkType '==' 'download'}} aud btn-download{{else}} btn-primary{{/ifCond}}"
									data-object-id="{{#if dataObjectIdLink}}{{dataObjectIdLink}}{{/if}}"
									role="button">
							{{else}}
								<button class="btn btn-primary" role="button" data-object-id="{{#if dataObjectIdLink}}{{dataObjectIdLink}}{{/if}}">
							{{/ifCond}}
						{{else}}
							{{#if linkLabel}}
								<button class="btn btn-primary" role="button" data-object-id="{{#if dataObjectIdLink}}{{dataObjectIdLink}}{{/if}}">
							{{/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'}}{{!--
                            --}}{{#ifCond linkUrl '||' linkAnchor}}{{!--
							--}}</a>{{!--
							--}}{{/ifCond}}{{!--
					--}}{{/ifCond}}

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

					{{#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" role="button">
									<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>
		</div>
	</div>
</div>