@if(!empty($productGridHeading))
    <h2 class="u-color-primary--500  u-spacing-mb5">@lang('site/products.availableProducts')</h2>
@endif
<div class="l-triple-grid">
    @foreach($products as $key => $product)
        <div class="l-triple-grid__item" data-kal="fade" style="--kal-delay: {{($loop->index % 3)*0.15}}s; --kal-duration: 0.4s;">
            @include('components.card', [
                'cardImage' =>  (count($product->documents) > 0) ? $product->documents->first()->medium_image_url : '',
                'cardTitle' => $product->translation->name,
                'cardDescription' => (isset($page) && $page->code_name == 'products') ? $product->translation->teaser_2 : $product->translation->teaser,
                'cardLink' => $links->products->route . '/' . $product->translation->slug,
                'cardButtonText' => __('site/global.readMore'),
            ])
        </div>
    @endforeach
</div>