{% set base = config.base_url %}

<div class="flex flex-wrap text-center mx-4 lg:pt-4 mt-10 lg:mx-10  lg:mt-4 pb-10">
    <div class="grid grid-cols-1 md:grid-cols-3 mx-auto items-center">
        <div class="w-full mb-4 border-b border-gray-600">
            <div class="arrow_up"></div>
            <a href="https://library.threefold.me/info/manual/#/technology/qsss/threefold__qsss_home" target="_blank"
                class="text-5xl font-extrabold uppercase">Store</a>
        </div>
        <div class="mb-4">
            {% if 'www_threefold_io' in base  %}
            {% set path = base ~ '/' ~ 'images/cloud_header_seprated.png' %}

            <img class="mx-auto sm:w-1/2 lg:w-full" src="{{path}}" alt="TF Cloud" />
            {% else %}
            <img class="mx-auto sm:w-1/2 lg:w-full" src="/images/cloud_header_seprated.png" alt="TF Cloud" />
            {% endif %}
        </div>
        <div class="w-full mb-4 border-b border-gray-600">
            <a href="https://library.threefold.me/info/manual/#/manual__weblets_home" target="_blank"
                class="text-5xl font-extrabold uppercase">Build</a>
            <div class="arrow_down"></div>
        </div>
    </div>
</div>

<style>
    .arrow_up,
    .arrow_down {
        display: inline-block;
        margin-right: 10px;
        width: 0;
        height: 0;
        border-width: 0 12.5px 30px 12.5px;
        border-color: transparent transparent #000000 transparent;
        border-style: solid;
    }

    .arrow_down {
        margin-left: 10px;

        border-width: 35px 12.5px 0 12.5px;
        border-color: #000000 transparent transparent transparent;
    }

    a {
        font-family: "Orbitron", sans-serif !important;
        color: black;
    }

    hr {
        height: 1px;
        border-width: 0;
        color: gray;
        background-color: gray;
    }
</style>