<div class="o-card-grid">
	@if(!empty($cardGridTitle))
		<h2 class="o-card-grid__heading">{{$cardGridTitle}}</h2>
	@endif

	@if(isset($cardItems))
		<div class="o-card-grid__main">
			@foreach($cardItems as $item)
				@continue(empty($item->translation->slug))
				<div class="o-card-grid__item" data-kal="fade" style="--kal-duration: 1.4s;">
					@include('components.card', [
						'cardImage' => $item->images->first()->small_image_url ?? '/img/placeholder-card.svg',
						'cardName' => !empty($item->translation->name) ? $item->translation->name : 'Project '.$item->id,
						'cardSubTitle' => !empty($item->translation->subTitle) ? $item->translation->subTitle : '',
						'cardLink' => isset($item->translation) ? $indexRoute . '/' . $item->translation->slug : $indexRoute,
					])
				</div>
			@endforeach
		</div>
	@endif

	@if(!empty($mobileAlternate) && $mobileAlternate)
		<div class="o-card-grid__back">
			@include('components.button', [
				'modifiers' => ['icon', 'ghost', 'on-dark'],
				'buttonText' => 'Terug naar overzicht',
				'buttonLink' => '/'
			])
		</div>
	@endif
</div>