@extends('main')
@section('content')
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css'>
    <style>
        $color-white: #ffffff;
        $color-black: #252a32;
        $color-light: #f1f5f8;
        $color-red: #d32f2f;
        $color-blue: #148cb8;

        $box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);

        *,
        *::before,
        *::after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
            list-style-type: none;
            text-decoration: none;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        

        .main {
            .container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 1rem;
                justify-content: center;
                align-items: center;
            }

            .card {
                color: $color-black;
                border-radius: 2px;
                background: $color-white;
                box-shadow: $box-shadow;

                &-image {
                    position: relative;
                    display: block;
                    width: 100%;
                    padding-top: 70%;
                    background: $color-white;

                    img {
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }

        @media only screen and (max-width: 600px) {
            .main {
                .container {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 1rem;
                }
            }
        }
        .card-image img {
            height: 225px;
            width: 100%;
        }
    </style>
    <section id="blog" class="blog-area p-relative pt-45 pb-40 fix">
        <div class="container">
            <div class="row ">
                <div class="col-xl-12 col-lg-12">
                    <div class="section-title mb-20">
                        <h2 class="text-center">Image Gallery</h2>
                        <br>
                    </div>
                </div>
            </div>
            <main class="main">
                <div class="container">
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/82.JPG') }}" data-fancybox="gallery"
                                >
                                <img src="{{ asset('frontend/solar/82.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 1</h6> -->
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/84.JPG') }}" data-fancybox="gallery"
                                >
                                <img src="{{ asset('frontend/solar/84.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 2</h6> -->
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/79.JPG') }}" data-fancybox="gallery">
                                <img src="{{ asset('frontend/solar/79.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 3</h6> -->
                            </a>
                        </div>
                    </div> 
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/50.JPG') }}" data-fancybox="gallery">
                                <img src="{{ asset('frontend/solar/50.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 3</h6> -->
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/56.JPG') }}" data-fancybox="gallery">
                                <img src="{{ asset('frontend/solar/56.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 3</h6> -->
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/58.JPG') }}" data-fancybox="gallery">
                                <img src="{{ asset('frontend/solar/58.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 3</h6> -->
                            </a>
                        </div>
                    </div>  
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/17.JPG') }}" data-fancybox="gallery">
                                <img src="{{ asset('frontend/solar/17.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 3</h6> -->
                            </a>
                        </div>
                    </div>  
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/29.JPG') }}" data-fancybox="gallery">
                                <img src="{{ asset('frontend/solar/29.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 3</h6> -->
                            </a>
                        </div>
                    </div>  
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/solar/41.JPG') }}" data-fancybox="gallery">
                                <img src="{{ asset('frontend/solar/41.JPG') }}" alt="Image Gallery">
                                <!-- <h6>Image 3</h6> -->
                            </a>
                        </div>
                    </div>  
                </div>
            </main>
        </div>
    </section>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'></script>
    <script src="./script.js"></script>

    <script>
        // Fancybox Configuration
        $('[data-fancybox="gallery"]').fancybox({
            buttons: [
                "slideShow",
                "thumbs",
                "zoom",
                "fullScreen",
                "share",
                "close"
            ],
            loop: false,
            protect: true
        });
    </script>
@endsection