@props([
    'items' => [], // [{image, title, subtitle}]
    'columns' => 3
])

<div 
    {{ $attributes->merge([
        'class' => "fluent-frame-image fluent-frame-image--cols-{$columns}" 
    ]) }}
    data-fluent-frame-image
>

    @if(count($items))
        @foreach($items as $item)
            <div class="fluent-frame-image__item">

                <div class="fluent-frame-image__media">
                    <img src="{{ $item['image'] }}" />

                    {{-- OVERLAY --}}
                    <div class="fluent-frame-image__overlay"></div>

                    {{-- CONTENT --}}
                    <div class="fluent-frame-image__content">
                        @if(isset($item['title']))
                            <h3>{{ $item['title'] }}</h3>
                        @endif

                        @if(isset($item['subtitle']))
                            <p>{{ $item['subtitle'] }}</p>
                        @endif
                    </div>
                </div>

            </div>
        @endforeach

    @else
        {{-- SLOT CUSTOM (FULL CONTROL) --}}
        {{ $slot }}
    @endif

</div>