@php
    if(!isset($imageSizes)) $imageSizes = ['medium' => 720, 'large' => 1440];
    $bannerImages = !empty($bannerImages) ? $bannerImages : $project->images;
    $captionTop = $page->translation->headline_top;
    $captionBottom = $page->translation->headline_bottom;
@endphp

<div class="o-banner">
    <div class="o-banner__main">
        @if(isset($bannerImages) && $bannerImages->count() >= 1)
            @foreach($bannerImages as $image)
                <picture class="o-banner__picture">
                    @foreach($imageSizes as $imageSizeKey => $imageSize)
                        @if(!$loop->last)
                            <source media="(max-width: {{$imageSize}}px)"
                                    srcset="@if(isset($image->{$imageSizeKey.'_image_url'})){{ $image->{$imageSizeKey.'_image_url'} }} @elseif(isset($image[$imageSizeKey])){{ $image[$imageSizeKey] }}@endif">
                        @else
                            <img class="o-banner__img" data-kal="fade" style="--kal-duration: 2.5s;"
                                 src="@if(isset($image->{$imageSizeKey.'_image_url'})){{ $image->{$imageSizeKey.'_image_url'} }} @elseif(isset($image[$imageSizeKey])){{ $image[$imageSizeKey] }} @endif"
                                 alt="">
                        @endif
                    @endforeach
                </picture>
            @endforeach
        @endif

        <div class="o-banner__description">
            <h2 class="o-banner__heading">
                <span class="o-banner__title" data-kal="slide-down" style="--kal-duration: 2s;">{{$project->translation->name ?? 'Project '.$project->id}}</span>

                @if(!empty($project->translation->subTitle))
                    <span class="o-banner__subtitle" data-kal="slide-left" style="--kal-duration: 1.6s;">{{$project->translation->subTitle}}</span>
                @endif
            </h2>
        </div>
    </div>
</div>