{% set styles = "background-image: url('images/V3.png');" %}
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
    <div class="relative lg:max-w-6xl mx-auto">
        <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
            {{body | markdown | safe }}
            <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
                <!-- capacity -->
                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <img
                        class="mx-auto p-4"
                        src="images/V3-08.png"
                        width="100"
                        alt=""
                    >
                    <div id="capacity" class="leading-none font-extrabold text-xl"></div>
                    <span class="block text-md mt-4 font-normal capitalize">capacity</span>
                </div>
                <!-- cores -->
                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <img
                        class="mx-auto p-4"
                        src="images/V3-11.png"
                        width="100"
                        alt=""
                    >
                    <div id="cores" class="leading-none font-extrabold text-xl"></div>
                    <span class="block text-md mt-4 font-normal capitalize">cores</span>
                </div>
                <!-- Nodes -->
                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <img
                        class="mx-auto p-4"
                        src="images/V3-09.png"
                        width="100"
                        alt=""
                    >
                    <div id="nodes" class="leading-none font-extrabold text-xl"></div>
                    <span class="block text-md mt-4 font-normal capitalize">nodes</span>
                </div>
                <!-- countries -->
                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <img
                        class="mx-auto p-4"
                        src="images/V3-10.png"
                        width="100"
                        alt=""
                    >
                    <div id="countries" class="leading-none font-extrabold text-xl"></div>
                    <span class="block text-md mt-4 font-normal capitalize">countries</span>
                </div>
                 <!-- farms -->
                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                    <img
                        class="mx-auto p-4"
                        src="images/farm.png"
                        width="100"
                        alt=""
                    >
                    <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
                    <span class="block text-md mt-4 font-normal capitalize">farms</span>
                </div>
            </div>
            <button class="my-8 blue_b">
                <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
                    Explore Grid Capacity
                </a>
            </button>
            {# <button class="my-8">
                <a href="/host" target="_self">
                    Become a Cloud Provider
                </a>
            </button> #}
        </div>
    </div>
</section>
<style>
    dd {
        display: inline-block;
        margin: auto;
        border-radius: 50%;
        line-height: 100px;
    }

    .bg-green {
        background-color: #70dfc9;
    }

    .bg-pink {
        background-color: #ea1ff7;
    }

    .blue_b{
  
        background-color:#2E83FF !important;
        color: #fff !important;
    
      }
      .blue_b a{
         color: #fff !important;
      }
    
    .blue_b:hover {
      background-color:#5596f5 !important;
    }

</style>