No overlap

            <div class="mt-6 grid grid-cols-2 md:grid-cols-5 lg:mt-8">
                <div class="cursor-pointer transition duration-500 ease-in-out col-span-1 flex justify-center p-8 bg-white border border-gray-100 transform hover:scale-110">
                    a
                </div>
                <div class="cursor-pointer transition duration-500 ease-in-out col-span-1 flex justify-center p-8 bg-white border border-gray-100 transform hover:scale-110">
                    b
                </div>
                <div class="cursor-pointer transition duration-500 ease-in-out col-span-1 flex justify-center p-8 bg-white border border-gray-100 transform hover:scale-110">
                    b
                </div>
                <div class="cursor-pointer transition duration-500 ease-in-out col-span-1 flex justify-center p-8 bg-white border border-gray-100 transform hover:scale-110">
                    b
                </div>
                <div class="cursor-pointer transition duration-500 ease-in-out col-span-1 flex justify-center p-8 bg-white border border-gray-100 transform hover:scale-110">
                    b
                </div>
            </div>