<template>
    <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="container px-5 py-2 mx-auto lg:pt-12 lg:px-32 ">
                <div class="flex flex-wrap -m-1 md:-m-2">
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/1.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/2.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/3.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/4.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/5.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/6.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/7.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/8.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/9.jpg">
                        </div>
                    </div>

                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/11.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/12.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/13.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/14.jpg">
                        </div>
                    </div>

                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/15.jpeg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/16.jpeg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/17.jpeg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/18.jpeg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/19.jpeg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/20.jpeg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/21.jpeg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/22.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/23.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/24.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/25.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/26.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/27.jpg">
                        </div>
                    </div>

                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/28.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/29.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/30.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/31.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/32.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/32.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/33.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/34.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/35.jpg">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/3">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-150"
                                src="/img/36.jpg">
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
</template>