Galleries.

13 Blocks

Visual marketing is one of the most effective ways of advertising and promoting your business, and adding an image gallery to your web page has the potential to instantly expand your client base.

1

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:px-32">
                <div class="flex flex-wrap justify-center mx-auto ">
                    <div class="w-full mt-6 lg:w-2/4 lg:pl-10 lg:py-6 lg:mt-0">
                        <img alt="image"
                            class="object-cover object-center w-full h-64 rounded-lg lg:h-auto"
                            src="https://dummyimage.com/400x400/F3F4F7/8693ac">
                        <div class="flex flex-col items-start mx-auto mt-8 sm:flex-row sm:items-center">
                            <h1 class="flex-grow mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font">Gallery 1.</h1>
                            <button
                                class="flex-shrink-0 px-4 py-2 mt-10 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg sm:mt-0 bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:shadow-outline focus:outline-none">Button</button>
                        </div>
                    </div>
                    <div class="w-full mt-6 lg:w-2/4 lg:pl-10 lg:py-6 lg:mt-0">
                        <img alt="image"
                            class="object-cover object-center w-full h-64 rounded-lg lg:h-auto"
                            src="https://dummyimage.com/400x400/F3F4F7/8693ac">
                        <div class="flex flex-col items-start mx-auto mt-8 sm:flex-row sm:items-center">
                            <h1 class="flex-grow mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font"> Gallery 2.
                            </h1>
                            <button
                                class="flex-shrink-0 px-4 py-2 mt-10 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg sm:mt-0 bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:shadow-outline focus:outline-none">Button</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
                                    

WICKEDTEMPLATES
"Free & premium Well designed landing pages to integrate with your next project."

Have a look to Wicked Templates.
2

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:px-10">
                <div class="flex flex-wrap py-8 md:flex-no-wrap">
                    <div class="w-full ">
                        <img alt="image" style="height:400px;"
                            class="object-cover object-center w-full h-64 rounded-lg lg:h-auto"
                            src="https://dummyimage.com/1024x400/F3F4F7/8693ac">
                        <div class="flex flex-col items-start mx-auto mt-8 sm:flex-row sm:items-center">
                            <div
                                class="flex flex-col items-center flex-grow mb-16 mr-64 text-left md:items-start md:text-left md:mb-0">
                                <h1
                                    class="mb-2 text-2xl font-semibold tracking-tighter text-left text-blue-700 sm:text-3xl title-font">
                                    Wicked Templates Screens.</h1>
                                <p
                                    class="mb-8 text-base leading-relaxed text-center text-gray-900 lg:text-left lg:text-1xl">
                                    Using Wicked Template Screens islike playing with lego, they just fit.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
                                    
3

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-6 mx-auto lg:px-10">
                <div class="flex flex-wrap -m-4">
                    <div class="p-4 lg:w-1/3 sm:w-1/2">
                        <div class="relative flex rounded-lg ">
                            <img alt="gallery"
                                class="absolute inset-0 object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/600x360/F3F4F7/8693ac">
                            <div
                                class="relative z-10 w-full px-8 py-10 bg-white rounded-lg opacity-0 hover:opacity-100">
                                <div class="justify-center block mx-auto text-center ">
                                    <button
                                        class="w-full px-4 py-3 m-12 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl lg:w-auto bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">
                                        See More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 lg:w-1/3 sm:w-1/2">
                        <div class="relative flex rounded-lg ">
                            <img alt="gallery"
                                class="absolute inset-0 object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/600x360/F3F4F7/8693ac">
                            <div
                                class="relative z-10 w-full px-8 py-10 bg-white rounded-lg opacity-0 hover:opacity-100">
                                <div class="justify-center block mx-auto text-center ">
                                    <button
                                        class="w-full px-4 py-3 m-12 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl lg:w-auto bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">
                                        See More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 lg:w-1/3 sm:w-1/2">
                        <div class="relative flex rounded-lg ">
                            <img alt="gallery" class="absolute inset-0 object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/600x360/F3F4F7/8693ac">
                            <div class="relative z-10 w-full px-8 py-10 bg-white rounded-lg opacity-0 hover:opacity-100">
                                <div class="justify-center block mx-auto text-center ">
                                    <button
                                        class="w-full px-4 py-3 m-12 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl lg:w-auto bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">
                                        See More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 lg:w-1/3 sm:w-1/2">
                        <div class="relative flex rounded-lg ">
                            <img alt="gallery" class="absolute inset-0 object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/600x360/F3F4F7/8693ac">
                            <div class="relative z-10 w-full px-8 py-10 bg-white rounded-lg opacity-0 hover:opacity-100">
                                <div class="justify-center block mx-auto text-center ">
                                    <button
                                        class="w-full px-4 py-3 m-12 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl lg:w-auto bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">
                                        See More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 lg:w-1/3 sm:w-1/2">
                        <div class="relative flex rounded-lg ">
                            <img alt="gallery" class="absolute inset-0 object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/600x360/F3F4F7/8693ac">
                            <div class="relative z-10 w-full px-8 py-10 bg-white rounded-lg opacity-0 hover:opacity-100">
                                <div class="justify-center block mx-auto text-center ">
                                    <button
                                        class="w-full px-4 py-3 m-12 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl lg:w-auto bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">
                                        See More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 lg:w-1/3 sm:w-1/2">
                        <div class="relative flex rounded-lg ">
                            <img alt="gallery" class="absolute inset-0 object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/600x360/F3F4F7/8693ac">
                            <div class="relative z-10 w-full px-8 py-10 bg-white rounded-lg opacity-0 hover:opacity-100">
                                <div class="justify-center block mx-auto text-center ">
                                    <button
                                        class="w-full px-4 py-3 m-12 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl lg:w-auto bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">
                                        See More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-start w-1/6 mx-auto mt-8 sm:flex-row sm:items-center">
                    <h1 class="mb-2 text-2xl font-medium text-gray-900 title-font tracking-thighter">See more.
                    </h1>
                    <span class="inline-flex">
                        <a
                            class="inline-flex items-center justify-center w-10 h-10 ml-4 text-white rounded-full shadow-xl bg-gradient-to-r from-blue-700 to-blue-600">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right"
                                width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"
                                fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <polyline points="9 6 15 12 9 18" />
                            </svg>
                        </a>
                    </span>
                </div>
            </div>
        </section>
                                    
4

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:px-48">
                <div class="mx-auto lg:w-3/3">
                    <div class="relative flex flex-wrap w-full px-10 py-32 mb-4">
                        <img alt="gallery"
                            class="absolute inset-0 block object-cover object-center w-full h-full border border-gray-200 rounded-lg opacity-25"
                            src="https://dummyimage.com/600x360/94a3b8/ffffff">
                        <div class="relative z-10 w-full text-left">
                            <h1 class="mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font">
                                Gallery 1.</h1>
                            <button
                                class="inline-flex justify-center px-6 py-4 mt-2 mr-10 font-semibold duration-500 ease-in-out transform bg-white rounded-lg transblueGrayition text--700 hover:border-blueGray-700 hover:bg-blueGray-700 hover:text-white focus:shadow-outline focus:outline-none">
                                Learn more »
                            </button>
                        </div>
                    </div>
                    <div class="flex flex-wrap -mx-2">
                        <div class="w-1/2 px-2">
                            <div class="relative flex flex-wrap w-full px-6 py-16 sm:py-24 sm:px-10">
                                <img alt="gallery"
                                    class="absolute inset-0 block object-cover object-center w-full h-full border border-gray-200 rounded-lg opacity-25"
                                    src="https://dummyimage.com/600x360/94a3b8/ffffff">
                                <div class="relative z-10 w-full text-left">
                                    <h1 class="mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font">Gallery.</h1>
                                     <button
                                            class="inline-flex justify-center px-6 py-4 mt-2 mr-10 font-semibold duration-500 ease-in-out transform bg-white rounded-lg transblueGrayition text--700 hover:border-blueGray-700 hover:bg-blueGray-700 hover:text-white focus:shadow-outline focus:outline-none">
                                            Learn more »
                                        </button>
                                </div>
                            </div>
                        </div>
                        <div class="w-1/2 px-2">
                            <div class="relative flex flex-wrap w-full px-6 py-16 sm:py-24 sm:px-10">
                                <img alt="gallery"
                                    class="absolute inset-0 block object-cover object-center w-full h-full border border-gray-200 rounded-lg opacity-25"
                                    src="https://dummyimage.com/600x360/94a3b8/ffffff">
                                <div class="relative z-10 w-full text-left">
                                    <h1 class="mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font">Gallery 3.</h1>
                                     <button
                                            class="inline-flex justify-center px-6 py-4 mt-2 mr-10 font-semibold duration-500 ease-in-out transform bg-white rounded-lg transblueGrayition text--700 hover:border-blueGray-700 hover:bg-blueGray-700 hover:text-white focus:shadow-outline focus:outline-none">
                                            Learn more »
                                        </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
                                  
5

            <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:px-32">
                <div class="flex flex-wrap justify-center mx-auto ">
                    <div class="w-full mt-6 lg:w-2/6 lg:pl-10 lg:py-6 lg:mt-0">
                        <img alt="ecommerce"
                            class="object-cover object-center w-full h-64 rounded-lg lg:h-auto"
                            src="https://dummyimage.com/400x600/F3F4F7/8693ac">
                    <div class="flex flex-col items-start mx-auto mt-8 sm:flex-row sm:items-center">
                        <h1 class="flex-grow mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font">
                            Ui Kits .
                        </h1>
                        <span class="inline-flex">
                            <a
                                class="inline-flex items-center justify-center w-10 h-10 text-white rounded-full bg-gradient-to-r from-blue-700 to-blue-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24"
                                    height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <polyline points="9 6 15 12 9 18" />
                                </svg>
                            </a>
                        </span>
                    </div>
                    </div>
                    <div class="w-full mt-6 lg:w-2/6 lg:pl-10 lg:py-6 lg:mt-0">
                        <img alt="ecommerce"
                            class="object-cover object-center w-full h-64 rounded-lg lg:h-auto"
                            src="https://dummyimage.com/400x600/F3F4F7/8693ac">
                        <div class="flex flex-col items-start mx-auto mt-8 sm:flex-row sm:items-center">
                            <h1 class="flex-grow mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font">
                              Illustrations
                            </h1>
                            <span class="inline-flex">
                                <a
                                    class="inline-flex items-center justify-center w-10 h-10 text-white rounded-full bg-gradient-to-r from-blue-700 to-blue-600">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <polyline points="9 6 15 12 9 18" />
                                    </svg>
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="w-full mt-6 lg:w-2/6 lg:pl-10 lg:py-6 lg:mt-0">
                        <img alt="ecommerce" class="object-cover object-center w-full h-64 rounded-lg lg:h-auto"
                            src="https://dummyimage.com/400x600/F3F4F7/8693ac">
                        <div class="flex flex-col items-start mx-auto mt-8 sm:flex-row sm:items-center">
                            <h1 class="flex-grow mb-2 text-2xl font-medium tracking-tighter text-gray-900 title-font">
                                Case Studies
                            </h1>
                            <span class="inline-flex">
                                <a
                                    class="inline-flex items-center justify-center w-10 h-10 text-white rounded-full bg-gradient-to-r from-blue-700 to-blue-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24"
                                        height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <polyline points="9 6 15 12 9 18" />
                                    </svg>
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </section>
        
6

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:pt-24 lg:px-32">
            <div class="flex flex-wrap -m-1 md:-m-2">
                <div class="flex flex-wrap w-1/2">
                    <div class="w-1/2 p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://dummyimage.com/500x300/F3F4F7/8693ac">
                    </div>
                    <div class="w-1/2 p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://dummyimage.com/501x301/F3F4F7/8693ac">
                    </div>
                    <div class="w-full p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://dummyimage.com/600x360/F3F4F7/8693ac">
                    </div>
                </div>
                <div class="flex flex-wrap w-1/2">
                    <div class="w-full p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://dummyimage.com/601x361/F3F4F7/8693ac">
                    </div>
                    <div class="w-1/2 p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://dummyimage.com/502x302/F3F4F7/8693ac">
                    </div>
                    <div class="w-1/2 p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://dummyimage.com/503x303/F3F4F7/8693ac">
                    </div>
                </div>
            </div>
        </section>
                                    
7

         <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:pt-16 lg:px-32">
                <div class="flex flex-wrap -m-1 md:-m-2">
                    <div class="flex flex-wrap w-1/2">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/800x800/F3F4F7/8693ac">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/2">
                        <div class="w-1/2 p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/500x500/F3F4F7/8693ac">
                        </div>
                        <div class="w-1/2 p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/500x500/F3F4F7/8693ac">
                        </div>
                        <div class="w-1/2 p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/500x500/F3F4F7/8693ac">
                        </div>
                        <div class="w-1/2 p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/500x500/F3F4F7/8693ac">
                        </div>
                    </div>
                </div>
        </section>
                                    
8

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:pt-16 lg:px-32">
                <div class="flex flex-wrap -m-1 md:-m-2">
                    <div class="flex flex-wrap w-1/2">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/800x800/F3F4F7/8693ac">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/2">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                                src="https://dummyimage.com/800x800/F3F4F7/8693ac">
                        </div>
                    </div>
                </div>
        </section>
                                    
9

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:pt-36 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"
                                src="https://dummyimage.com/800x800/F3F4F7/8693ac">
                        </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"
                                src="https://dummyimage.com/800x800/F3F4F7/8693ac">
                        </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"
                                src="https://dummyimage.com/800x800/F3F4F7/8693ac">
                        </div>
                    </div>
                </div>
        </section>
                                                                        
10

        <section class="overflow-hidden text-gray-700 body-font">
            <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"
                                src="https://dummyimage.com/800x600/F3F4F7/8693ac">
                        </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"
                                src="https://dummyimage.com/800x600/F3F4F7/8693ac">
                        </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"
                                src="https://dummyimage.com/800x600/F3F4F7/8693ac">
                        </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"
                                src="https://dummyimage.com/800x600/F3F4F7/8693ac">
                        </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"
                                src="https://dummyimage.com/800x600/F3F4F7/8693ac">
                        </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"
                                src="https://dummyimage.com/800x600/F3F4F7/8693ac">
                        </div>
                    </div>
                </div>
        </section>
                                    
11

        <section class="overflow-hidden text-gray-700 body-font">
        <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/2">
        <div class="w-full p-1 md:p-2">
        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
        src="https://dummyimage.com/500x300/F3F4F7/8693ac">
        </div>
        <div class="w-full p-1 md:p-2">
        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
        src="https://dummyimage.com/500x200/F3F4F7/8693ac">
        </div>
        </div>
        <div class="flex flex-wrap w-1/2">
        <div class="w-full p-1 md:p-2">
        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
        src="https://dummyimage.com/500x200/F3F4F7/8693ac">
        </div>
        <div class="w-full p-1 md:p-2">
        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
        src="https://dummyimage.com/500x300/F3F4F7/8693ac">
        </div>
        </div>
        </div>
        </section>
                                                                        
12

        <section class="overflow-hidden text-gray-700 body-font">
        <div class="container px-5 py-2 mx-auto lg:pt-16 lg:px-32">
        <div class="flex flex-wrap -m-1 md:-m-2">
        <div class="flex flex-wrap w-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"
        src="https://dummyimage.com/1024x500/F3F4F7/8693ac">
        </div>
        </div>
        </div>
        </section>
                                                                        
13

        <section class="overflow-hidden text-gray-700 body-font">
            <div class="container px-5 py-2 mx-auto lg:pt-2 lg:px-32">
                <div class="flex flex-wrap -m-1 md:-m-2">
                    <div class="flex flex-wrap w-1/-2">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg "
                                src="https://dummyimage.com/1024x300/F3F4F7/8693ac">
                        </div>
                    </div>
                    <div class="flex flex-wrap w-1/-2">
                        <div class="w-full p-1 md:p-2">
                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg "
                                src="https://dummyimage.com/1024x300/F3F4F7/8693ac">
                        </div>
                    </div>
                </div>
        </section>