<div class="relative px-4 sm:px-6 py-12 lg:py-28 lg:px-8">
    <div class="absolute inset-0">
        <div class="bg-white h-1/3 sm:h-2/3"></div>
    </div>
    <div class="relative max-w-7xl mx-auto">
        <div class="text-center">
            <h2 class="
                lg:text-6xl
                leading-tight
                font-normal font-heading
                
                sm:leading-10
                lg:pb-10
              ">
              Dive Deeper
            </h2>
        </div>
        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="images/planet_first_people_first.png" alt="" />
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <a href="blog/planet-first-people-first" class="block">
                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
                                Planet first. People first.
                            </h3>
                            <div class="mt-3 leading-6 text-gray-500 text-lg">Together with our community and partners, we're taking action and making productive choices for our planet and humanity.</div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="images/internet_of_internets.png" alt="" />
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <a href="/blog/internet-of-internets/" class="block">
                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
                                Welcome to the Internet of Internets
                            </h3>
                            <div class="mt-3 leading-6 text-gray-500 text-lg">Together, we’re building our own future through the Internet of Internets – decentralized, open, inclusive, regenerative, and resilient.</div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="images/tft_vedio.jpg" alt="" />
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <a href="https://www.youtube.com/watch?v=5DtVU66Z74s" target="_blank" class="block">
                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
                                ThreeFold Explained in 2 Minutes
                            </h3>
                            <div class="mt-3 leading-6 text-gray-500 text-lg">We make sovereignty a reality and
                                opportunities universal. Our technology ensures data ownership and a democratized
                                Internet. Discover how.</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>