@props([
    'items' => [],
])

<div class="org-falabr-grid row g-3 mb-4" role="list">
    @foreach($items as $item)
        <div class="col-12 col-sm-6 col-lg-4 d-flex" role="listitem">
            <a href="{{ $item['url'] }}"
               target="_blank"
               rel="noopener noreferrer"
               class="org-falabr-card flex-fill"
               style="--org-falabr-bg: {{ $item['bg_color'] }};"
               title="{{ __($item['tooltip']) }}"
               aria-label="{{ __($item['title']) }} — {{ __($item['description']) }}">
                <span class="org-falabr-card__icon" aria-hidden="true">
                    <img src="{{ asset($item['icon_image']) }}" alt="">
                </span>
                <span class="org-falabr-card__text">
                    <span class="org-falabr-card__title">{{ __($item['title']) }}</span>
                    <span class="org-falabr-card__desc">{{ __($item['description']) }}</span>
                </span>
            </a>
        </div>
    @endforeach
</div>