@extends('frontend.layouts.main')
@push('title')
    <title>Photo Gallery</title>
@endpush
@section('main-section')
    {{-- start-breadcrumb --}}
    <div class="breadcrumb-banner">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Gallery</li>
                    <li class="breadcrumb-item active" aria-current="page">Photo Gallery</li>
                </ol>
            </nav>
            <h3>Photo Gallery</h3>
        </div>
    </div>
    {{-- end-breadcrumb --}}

    {{-- start-main --}}

    <main>

        <section class="gallery-category-section">
            <div class="container ptb">
                <div class="row mb-5">
                    <div class="col-md-6">
                        <div class="main-title-wrapper">
                            <h2 class="main-title">Our Galleries<span class="title-accent"></span></h2>
                        </div>
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-md-6 col-lg-4">
                        <div class="category-item position-relative overflow-hidden">
                            <div class="ratio ratio-4x3">
                                <img src="{{ asset('frontend/gallery/woollen-caps/wd-1.jpeg') }}"
                                    class="category-img">
                            </div>
                            <div class="category-overlay">
                                <div class="category-details">
                                    <span class="category-count">03 Photos</span>
                                    <h4 class="category-name">Woollen Caps and Socks Distribution – Primary School Matera
                                    </h4>
                                    <a href="{{ url('gallery/picture-gallery/woollen-caps') }}" class="category-link">View
                                        Gallery <i class="fa-solid fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="category-item position-relative overflow-hidden">
                            <div class="ratio ratio-4x3">
                                <img src="{{ asset('frontend/gallery/medical-camp/camp-1.jpeg') }}"
                                    class="category-img">
                            </div>
                            <div class="category-overlay">
                                <div class="category-details">
                                    <span class="category-count">09 Photos</span>
                                    <h4 class="category-name">Medical Camp – Talkatora Road, Rajajipuram, Lucknow</h4>
                                    <a href="{{ url('gallery/picture-gallery/medical-camp') }}" class="category-link">View
                                        Gallery <i class="fa-solid fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <div class="category-item position-relative overflow-hidden">
                            <div class="ratio ratio-4x3">
                                <img src="{{ asset('frontend/gallery/blanket-distribution/bp-1.jpeg') }}"
                                    class="category-img">
                            </div>
                            <div class="category-overlay">
                                <div class="category-details">
                                    <span class="category-count">07 Photos</span>
                                    <h4 class="category-name">Blanket Distribution on Basant Panchami – Ranikhera, Sarojini
                                        Nagar, Lucknow</h4>
                                    <a href="{{ url('gallery/picture-gallery/blanket-distribution') }}"
                                        class="category-link">View Gallery <i class="fa-solid fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="category-item position-relative overflow-hidden">
                            <div class="ratio ratio-4x3">
                                <img src="{{ asset('frontend/gallery/independence-day/indep-2.jpeg') }}"
                                    class="category-img">
                            </div>
                            <div class="category-overlay">
                                <div class="category-details">
                                    <span class="category-count">07 Photos</span>
                                    <h4 class="category-name">
                                        Independence Day Performance – The Soul Anahat Band, NTPC Unchahar
                                    </h4>
                                    <a href="{{ url('gallery/picture-gallery/independence-day') }}"
                                        class="category-link">View Gallery <i class="fa-solid fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="category-item position-relative overflow-hidden">
                            <div class="ratio ratio-4x3">
                                <img src="{{ asset('frontend/gallery/diwali-celebration/dc-1.jpeg') }}"
                                    class="category-img">
                            </div>
                            <div class="category-overlay">
                                <div class="category-details">
                                    <span class="category-count">02 Photos</span>
                                    <h4 class="category-name">
                                     Diwali Celebration
                                    </h4>
                                    <a href="{{ url('gallery/picture-gallery/diwali-celebration') }}"
                                        class="category-link">View Gallery <i class="fa-solid fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>                   
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="category-item position-relative overflow-hidden">
                            <div class="ratio ratio-4x3">
                                <img src="{{ asset('frontend/gallery/woollen-essentials/we-1.jpeg') }}"
                                    class="category-img">
                            </div>            
                            <div class="category-overlay">
                                <div class="category-details">
                                    <span class="category-count">01 Photos</span>
                                    <h4 class="category-name">
                                    Woollen Essentials Distribution – Nirmal Prem Ashram, Greater Noida
                                    </h4>
                                    <a href="{{ url('gallery/picture-gallery/woollen-essentials') }}"
                                        class="category-link">View Gallery <i class="fa-solid fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    {{-- end-main --}}
@endsection