{{#fields}}
<div class="slick videoAndImageHeader" id="js-wrapper">
	<div class="container-max-width">
		<div class="slider-item" role="toolbar">
			{{#slides}}
			{{#.}}
			{{#fields.imageContent}}
			<div class="image-item-wrapper">
				<figure>
					{{! Using added renditionURL if available}}
					{{#fields.media.renditionURL}}
					<img src="{{fields.media.renditionURL}}" data-image="{{fields.media.renditionURL}}" class="img-responsive" loading="lazy">
					{{/fields.media.renditionURL}}
					{{^fields.media.renditionURL}}
					<img src="{{fields.media.fields.file.url}}" data-image="{{fields.media.fields.file.url}}" class="img-responsive" loading="lazy">
					{{/fields.media.renditionURL}}
					
				</figure>
				<div class="textContainer textImage" style="text-shadow: rgb(0, 0, 0) 2px 2px; display: block;">
					<h3 class="animatedHeader animatedText "
						style='animation-delay: {{fields.animationDelay}}; color: {{fields.textColor}}; text-align: {{fields.textAlignment}}'>
						{{fields.title}}</h3>
					<div id="description{{index}}">
						{{{fields.paragraphFieldRichText}}}
					</div>
				</div>
			</div>
            {{/fields.imageContent}}
            {{#fields.iframe}}
            <div class="video-item">
                <div class="video-container">
                     {{{fields.iframe}}}
                </div>
                <div class="textContainer textImage" style="text-shadow: rgb(0, 0, 0) 2px 2px; display: block;">
					<h3 class="animatedHeader animatedText "
						style='animation-delay: {{fields.animationDelay}}; color: {{fields.textColor}}; text-align: {{fields.textAlignment}}'>
						{{fields.title}}</h3>
					<div id="description{{index}}">
						{{{fields.paragraphFieldRichText}}}
					</div>
				</div>
            </div>
            {{/fields.iframe}}
			{{/.}}
			{{/slides}}
		</div>
	</div>
</div>
{{/fields}}
{{#hydrateData}}
<div class="data-bs-hydrate" data-hydrate="{{hydrateData}}"></div>
{{/hydrateData}}