<div class="lg:py-24 flex flex-col my-6 p-auto lg:px-20">
    <h2 class="flex py-2 mx-auto font-normal lg:text-6xl">
        The Team
    </h2>
    <div class="lg:max-w-4xl lg:text-xl text-lg 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="/people/kristof-de-spiegeleer/" title="Kristof De Spiegeleer">
                        <img src="/images/people/kristof_de_spiegeleer.jpeg" class="rounded-full mx-auto mt-3" alt="Kristof De Spiegeleer">
                    </a>
                </div>
            </div>
            <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="/people/adnan-fatayerji/" title="Adnan Fatayerji">
                        <img src="/images/people/adnan_fatayerji.jpg" class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji">
                    </a>
                </div>
            </div>
            <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="/people/sabrina-sadik/" title="Sabrina Sadik">
                        <img src="/images/people/sabrina_sadik.jpg" class="rounded-full mx-auto mt-3" alt="Sabrina Sadik">
                    </a>
                </div>
            </div>
            <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="/people/sacha-obeegadoo/" title="Sacha obeegadoo">
                        <img src="/images/people/sacha_obeegadoo.jpg" class="rounded-full mx-auto mt-3" alt="Sacha obeegadoo">
                    </a>
                </div>
            </div>
            <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="/people/jan-de-landtsheer/" title="Jan De Landtsheer">
                        <img src="/images/people/jan_de_landtsheer.jpeg" class="rounded-full mx-auto mt-3" alt="Jan De Landtsheer">
                    </a>
                </div>
            </div>
            <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="/people/reem-khamis/" title="Reem Khamis">
                        <img src="/images/people/reem_khamis.jpg" class="rounded-full mx-auto mt-3" alt="Reem Khamis">
                    </a>
                </div>
            </div>
            <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="/people/ahmed-thabet/" title="Ahmed Thabet">
                        <img src="/images/people/ahmed_thabet.jpg" class="rounded-full mx-auto mt-3" alt="Ahmed Thabet">
                    </a>
                </div>
            </div>
            <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="/people/florian-fournier/" title="Florian Fournier">
                        <img src="/images/people/florian_fournier.jpeg" class="rounded-full mx-auto mt-3" alt="Florian Fournier">
                    </a>
                </div>
            </div>
            <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="/people/ewald-weizenbauer/" title="Ewald Weizenbauer">
                        <img src="/images/people/ewald_weizenbauer.jpg" class="rounded-full mx-auto mt-3" alt="Ewald Weizenbauer">
                    </a>
                </div>
            </div>
            <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="/people/owen-kemp/" title="Owen Kemp">
                        <img src="/images/people/owen_kemp.jpeg" class="rounded-full mx-auto mt-3" alt="Owen Kemp">
                    </a>
                </div>
            </div>
            <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="/people/peter-van-der-henst/" title="Peter van der Henst">
                        <img src="/images/people/peter_van_der_henst.png" class="rounded-full mx-auto mt-3" alt="Peter van der Henst">
                    </a>
                </div>
            </div>
            <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="/people/alexandre-hannelas/" title="alexandre_hannelas">
                        <img src="/images/people/alexandre_hannelas.jpeg" class="rounded-full mx-auto mt-3" alt="alexandre_hannelas">
                    </a>
                </div>
            </div>
            <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="/people/karoline-zizka/" title="Karoline Zizka">
                        <img src="/images/people/karoline_zizka.jpeg" class="rounded-full mx-auto mt-3" alt="Karoline Zizka">
                    </a>
                </div>
            </div>
            <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="/people/lee-smet/" title="Lee Smet">
                        <img src="/images/people/lee_smet.png" class="rounded-full mx-auto mt-3" alt="Lee Smet">
                    </a>
                </div>
            </div>
            <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="/people/maxime-daniel/" title="Maxime Daniel">
                        <img src="/images/people/maxime_daniel.png" class="rounded-full mx-auto mt-3" alt="Maxime Daniel">
                    </a>
                </div>
            </div>
            <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="/people/pierre-van-hoorebeke/" title="Pierre van Hoorebeke">
                        <img src="/images/people/pierre_van_hoorebeke.jpg" class="rounded-full mx-auto mt-3" alt="Pierre van Hoorebeke">
                    </a>
                </div>
            </div>
            <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="/people/sam-taggart/" title="Sam Taggart">
                        <img src="/images/people/sam_taggart.jpg" class="rounded-full mx-auto mt-3" alt="Sam Taggart">
                    </a>
                </div>
            </div>
            <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="/people/scott-yeager/" title="Scott Yeager">
                        <img src="/images/people/scott_yeager.jpg" class="rounded-full mx-auto mt-3" alt="Scott Yeager">
                    </a>
                </div>
            </div>
            {#
            <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="/people/gloria-anne/" title="Gloria Anne">
                        <img src="images/people/gloria_anne.png" class="rounded-full mx-auto mt-3" alt="Gloria Anne">
                    </a>
                </div>
            </div>
            #}
            <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="/people/sasha-astiadi/" title="Sasha Astiadi">
                        <img src="/images/people/sasha_astiadi.png" class="rounded-full mx-auto mt-3" alt="Sasha Astiadi">
                    </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: 130px;
        width: 130px;
    }

    .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: 110px;
        width: 110px;
    }

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