<div class="flex flex-wrap grid-flow-row font-semibold text-2xl">

    <div class="w-1/2 md:w-1/4 px-2">
        <a href="#" class="relative h-full w-full block group">
            <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>
            <p class="absolute bottom-0 left-0 ml-6 mb-8 text-white">Spacious Suites</p>
        </a>
    </div>

    <div class="w-full md:w-1/2 px-2">
        <a href="#" class="relative h-full w-full block group">
            <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>
            <p class="absolute bottom-0 left-0 ml-6 mb-8 text-white">Spacious Suites</p>
        </a>
    </div>

    <div class="w-1/2 md:w-1/4 px-2">
        <a href="#" class="relative h-full w-full block group">
            <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>
            <p class="absolute bottom-0 left-0 ml-6 mb-8 text-white">Spacious Suites</p>
        </a>
    </div>

</div>