{{#fields}}
<section class="hero" data-trackas="hero" {{#devo_feature_machine-translated}}machine-translated="true"{{/devo_feature_machine-translated}}>
    <div class="bg">
        <div class="bg-image"></div>
        <video muted="true" loop class="bg-video"></video>
        <div class="bg-overlay"></div>
    </div>

	<div class="content-container">
		<div class="content">
			{{#title}}
			<h2 class="title">{{title}}</h2>
			{{/title}}

			{{#body}}
			<div class="body"></div>
			{{/body}}

			<div class="ctas">
				<input type="text" class="searchBar invisible" placeholder="Search">
				{{#ctas}}
				<div class="inner-cta {{id}}"></div>
				{{/ctas}}
			</div>
		</div>

		{{#overlay_media}}
		<div class="overlay-container">
			<img loading="lazy" class="overlay-image" alt=""/>
			<video controls class="overlay-video"></video>
		</div>
		{{/overlay_media}}
		{{#secondary_video_media}}
		<div class="overlay-container">
			<div class="overlay-youtube-player" {{#video_data_label}}data-lbl="{{video_data_label}}"{{/video_data_label}}>
				<iframe loading="lazy" title="Youtube Video" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
				<div class="youtube-preview">
					<img loading="lazy" class="youtube-preview-image" alt="Youtube Preview" />
					<button class="play" aria-label="Play Video">
						<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
					</button>
				</div>
			</div>
			<video controls class="overlay-video"></video>
		</div>
		{{/secondary_video_media}}
	</div>

    <div class="video-controls">
        <button class="play-btn paragraphLBold"><img loading="lazy" class="play-icon" alt="Play Button">Play video</button>
        <button class="pause-btn paragraphLBold"><img loading="lazy" class="pause-icon" alt="Pause Button">Pause video</button>
    </div>
</section>
{{/fields}}