---
import Layout from "../layouts/Layout.astro"
import Header from "../components/Header.astro"
import MainMenu from "../components/MainMenu.astro"
import Footer from "../components/Footer.astro"
---
<Layout title="">
    <Header />
<MainMenu />
    <main>
        <div>
            <div class="grid place-items-center bg-blue-700  w-48 text-4xl font-bold text-white rounded-full p-1 md:mt-8 absolute md:inset-x-2/4 top-56 md:-ml-28 -mt-40 inset-x-2/4 top-72 -ml-28 gap-4">Gallery</div>
            <section class="overflow-hidden text-gray-700 mt-32">
                <div class="">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full">
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/1.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/2.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/3.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/4.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/5.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/6.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/7.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/8.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/9.jpg">
                            </div>
                        </div>
    
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/11.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/12.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/13.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/14.jpg">
                            </div>
                        </div>
    
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/15.jpeg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/16.jpeg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/17.jpeg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/18.jpeg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/19.jpeg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/20.jpeg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/21.jpeg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/22.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/23.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/24.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/25.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/26.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/27.jpg">
                            </div>
                        </div>
    
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/28.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/29.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/30.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/31.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/32.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/32.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/33.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/34.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/35.jpg">
                            </div>
                        </div>
                        <div class="flex flex-wrap h-full">
                            <div class="w-full p-1 md:p-2">
                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
                                    src="/img/36.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <Footer />
</Layout>