@php($d = $d ?? [])
<section class="vs-section vs-gallery" id="gallery"
         x-data="{ open:false, src:'', cap:'' }">
    <div class="vs-container">
        <div class="vs-head" data-aos="fade-up"><h2 class="vs-h2">{{ $d['heading'] ?? '' }}</h2></div>
        <div class="vs-gallery-grid">
            @foreach(($d['items'] ?? []) as $i => $g)
                @if(!empty($g['image']))
                    <figure class="vs-gallery-item" data-aos="zoom-in" data-aos-delay="{{ ($i % 4) * 60 }}"
                            @click="open=true; src='{{ $g['image'] }}'; cap='{{ addslashes($g['caption'] ?? '') }}'">
                        <img src="{{ $g['image'] }}" alt="{{ $g['caption'] ?? '' }}" loading="lazy">
                        @if(!empty($g['caption']))<figcaption>{{ $g['caption'] }}</figcaption>@endif
                    </figure>
                @endif
            @endforeach
        </div>
    </div>
    <div class="vs-lightbox" x-show="open" x-transition @click="open=false" style="display:none">
        <button class="vs-lightbox-close" @click.stop="open=false"><i class="fas fa-times"></i></button>
        <img :src="src" @click.stop alt="">
        <p class="vs-lightbox-cap" x-text="cap"></p>
    </div>
</section>
