<div class="o-hero  @modifiers(o-hero')">
	<picture class="o-hero__picture" data-kal="fade">
		@if(isset($page->images) && $page->images->isNotEmpty())
			@php
				$headingImages = $page->images->first();
			@endphp

			@foreach([ 'small' => 606, 'medium' => 802, 'large' => 1440] as $imageSizeKey => $imageSize)
				@if(!$loop->last)
					<source media="(max-width: {{$imageSize}}px)"
							srcset="{{ $headingImages->{$imageSizeKey.'_image_url'} }}">
				@else
					<img class="o-hero__img"
						 src="{{ $headingImages->{$imageSizeKey.'_image_url'} }}"
						 alt="{{ $headingImages->name }}"
					>
				@endif
			@endforeach

		@else
			<div class="" class="u-bg-secondary-800"></div>
		@endif
	</picture>
</div>