@php
    $galleries = \App\Models\Gallery::get();
@endphp
<!-- Section: Gallery -->
<section id="gallery" class="bg-silver-light">
    <div class="container pb-70">
        <div class="section-title text-center">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2 class="mt-0 line-height-1 text-center mb-10 text-black-333 text-uppercase">Our Recent <span
                            class="text-theme-colored"> Works</span></h2>
                    {{-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p> --}}
                </div>
            </div>
        </div>
        <div class="section-content">
            <div class="row">
                <div class="col-md-12">
                    <!-- Portfolio Gallery Grid -->
                    <div class=" row gap-1" data-lightbox="gallery">
                        <!-- Portfolio Item Start -->
                        @forelse ($galleries as $gallery)
                            @if ($gallery->image)
                                @foreach ($gallery->image as $image)
                                    <div class="col-lg-3 col-md-4 col-6 mb-3">
                                        <div class="gallery-item">
                                            <div class="thumb">
                                                <img alt="project" src="{{ $image->getUrl() }}" class="img-fullwidth">
                                                <div class="overlay-shade"></div>
                                                <div class="icons-holder">
                                                    <div class="icons-holder-inner">
                                                        <div
                                                            class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
                                                            <a href="{{ $image->getUrl() }}"
                                                                data-lightbox-gallery="gallery"><i
                                                                    class="fa fa-picture-o"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        @empty

                        @endforelse

                        <!-- Portfolio Item End -->
                    </div>
                    <!-- End Portfolio Gallery Grid -->
                </div>
            </div>
        </div>
    </div>
</section>