<div class="bg-gray-100 h-full">

    <div class="flex flex-wrap justify-center max-w-sm sm:max-w-xl md:max-w-4xl mx-auto">

        <div class="w-1/2 md:w-1/3 px-2 py-4 flex justify-center">
            <a href="#" class="group relative h-40 w-40 sm:h-52 sm:w-52 lg:h-64 lg:w-64 rounded-full overflow-hidden">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500" alt="">
                <div class="absolute inset-0 bg-gradient-to-b group-hover:from-transparent to-black opacity-0 group-hover:opacity-50 transition duration-200 ease-in-out"></div>
                <div class="flex absolute inset-0 justify-center items-center p-1">
                    <p class="leading-snug text-center text-white text-lg sm:text-xl lg:text-2xl font-semibold uppercase">Spacious
                        Suites Spacious SuitesSpacious SuitesSpacious SuitesSpacious Suites asdfadsf asfasdf adsf asf asf da</p>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/3 px-2 py-4 flex justify-center">
            <a href="#" class="group relative h-40 w-40 sm:h-52 sm:w-52 lg:h-64 lg:w-64 rounded-full overflow-hidden">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500" alt="">
                <div class="absolute inset-0 bg-gradient-to-b group-hover:from-transparent to-black opacity-0 group-hover:opacity-50 transition duration-200 ease-in-out"></div>
                <div class="flex absolute inset-0 justify-center items-center p-1">
                    <p class="leading-snug text-center text-white text-lg sm:text-xl lg:text-2xl font-semibold uppercase">Spacious
                        Suites</p>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/3 px-2 py-4 flex justify-center">
            <a href="#" class="group relative h-40 w-40 sm:h-52 sm:w-52 lg:h-64 lg:w-64 rounded-full overflow-hidden">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500" alt="">
                <div class="absolute inset-0 bg-gradient-to-b group-hover:from-transparent to-black opacity-0 group-hover:opacity-50 transition duration-200 ease-in-out"></div>
                <div class="flex absolute inset-0 justify-center items-center p-1">
                    <p class="leading-snug text-center text-white text-lg sm:text-xl lg:text-2xl font-semibold uppercase">Spacious
                        Suites</p>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/3 px-2 py-4 flex justify-center">
            <a href="#" class="group relative h-40 w-40 sm:h-52 sm:w-52 lg:h-64 lg:w-64 rounded-full overflow-hidden">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500" alt="">
                <div class="absolute inset-0 bg-gradient-to-b group-hover:from-transparent to-black opacity-0 group-hover:opacity-50 transition duration-200 ease-in-out"></div>
                <div class="flex absolute inset-0 justify-center items-center p-1">
                    <p class="leading-snug text-center text-white text-lg sm:text-xl lg:text-2xl font-semibold uppercase">Spacious
                        Suites</p>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/3 px-2 py-4 flex justify-center">
            <a href="#" class="group relative h-40 w-40 sm:h-52 sm:w-52 lg:h-64 lg:w-64 rounded-full overflow-hidden">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500" alt="">
                <div class="absolute inset-0 bg-gradient-to-b group-hover:from-transparent to-black opacity-0 group-hover:opacity-50 transition duration-200 ease-in-out"></div>
                <div class="flex absolute inset-0 justify-center items-center p-1">
                    <p class="leading-snug text-center text-white text-lg sm:text-xl lg:text-2xl font-semibold uppercase">Spacious
                        Suites</p>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/3 px-2 py-4 flex justify-center">
            <a href="#" class="group relative h-40 w-40 sm:h-52 sm:w-52 lg:h-64 lg:w-64 rounded-full overflow-hidden">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500" alt="">
                <div class="absolute inset-0 bg-gradient-to-b group-hover:from-transparent to-black opacity-0 group-hover:opacity-50 transition duration-200 ease-in-out"></div>
                <div class="flex absolute inset-0 justify-center items-center p-1">
                    <p class="leading-snug text-center text-white text-lg sm:text-xl lg:text-2xl font-semibold uppercase">Spacious
                        Suites</p>
                </div>
            </a>
        </div>

    </div>

</div>