<div class="relative pt-16 px-4 sm:px-6 lg:pt-24 lg:pb-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-bold font-heading
                uppercase
                sm:leading-10
                lg:pb-10
              ">
                Featured Stories
            </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/the_threefold_movement.png" alt="" />
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <a href="https://threefold.io/blog/post/the_threefold_movement/" class="block">
                            <h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
                                Into the Fold – The ThreeFold Movement
                            </h3>
                            <div class="mt-3 leading-6 text-gray-700 text-xl">It's not by mistake that you're here,
                                reading this post. You can feel that a global shift is happening. And you want to do
                                something about it.</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/new_internet.jpg" alt="" />
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <a href="https://threefold.io/blog/post/the_threefold_movement/" class="block">
                            <h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
                                Building a New Internet From the Ground Up – Part 1: Introduction
                            </h3>
                            <div class="mt-3 leading-6 text-gray-700 text-xl">The first episode in an approachable
                                series on the inner workings of the ThreeFold Grid. Explore our technology stack and
                                what makes ThreeFold special.</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://threefold.io/blog/post/the_threefold_movement/" class="block">
                            <h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
                                ThreeFold Explained in 2 Minutes
                            </h3>
                            <div class="mt-3 leading-6 text-gray-700 text-xl">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>