<section class="cm-gray-2 body-font">
    <div class="section-container">
        <a href="/about/team" alt="Learn more about the team">
        <div class="flex flex-col text-center w-full mb-20">
            <h1 class="text-2xl font-medium title-font mb-4 cm-gray-1 tracking-widest">OUR TEAM</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">{{ include.data.text }}</p>
        </div>
        </a>
        <div class="flex flex-wrap -m-4">

            {% for item in include.data.team %}
            <div class="p-4 lg:w-1/2">
                <div class="h-full flex sm:flex-row flex-col sm:justify-start justify-center text-center sm:text-left">
                    <div class="flex-grow sm:pl-8">
                        <div class="flex items-end">
                            <div class="mb-5">
                                <img src="https://github.com/{{ item.tag }}.png?size=40" alt="mdo" class="rounded-full" width="40" height="40" style="margin:0px">
                            </div>
                            <div>
                                <h2 class="title-font font-medium text-lg cm-gray-1">{{ item.tag }}</h2>
                                <h3 class="cm-gray-3 mb-3">{{ item.name }}</h3>
                            </div>
                        </div>
                        <p class="mb-4">{{ item.text }}</p>
                        <span class="inline-flex">
                          {% for link in item.links %}
                          <a class="cm-gray-3" href="{{ link.link }}" alt="learn more">{{ link.text }}</a>
                          {% endfor %}
                        </span>
                    </div>
                </div>
            </div>
            {% endfor %}

        </div>
    </div>
</section>