<div class="lg:my-32 flex flex-col mt-5 p-auto lg:px-40">
    <h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
        THE TEAM
    </h2>
    <div class="lg:max-w-4xl text-xl text-center mb-8 mx-auto leading-relaxed">Spread across the world, our team has
        built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
        vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
        digital workloads via smart contract, removing all forms of centralization from global IT systems.</div>
    <div class="flex overflow-x-scroll pb-10 scrollable">
        <div class="flex flex-nowrap ml-10 mt-10">
            <div class="inline-block px-3">
                <div class="
                box
                max-w-xs
                overflow-hidden
                rounded-full
                shadow-md
                hover:shadow-xl
                transition-shadow
                duration-300
                ease-in-out
              ">
                    <a href="https://threefold.io/people/adnan_fatayerji/" title="Adnan Fatayerji">
                        <img src="https://threefold.io/assets/static/adnan_fatayerji.a68c322.7ba2b95e75c9fab15be532f16ac0d644.jpg"
                            class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .scrollable::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 20px;
    }

    .scrollable::-webkit-scrollbar-thumb {
        background: linear-gradient(45deg, #70dfc9, #ee7bf7);
        border-radius: 20px;
    }

    /* #70dfc9, #ee7bf7 */
    .box {
        position: relative;
        height: 150px;
        width: 150px;
    }

    .box::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        padding: 10px;
        background: linear-gradient(45deg, #70dfc9, #ee7bf7);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
    }

    .box img {
        filter: grayscale(100%);
        height: 130px;
        width: 130px;
    }

    .box img:hover {
        filter: grayscale(0);
    }
</style>