{% if page.sponsors %} {% assign tiers=site.data. %}

<div class="columns is-multiline">
    {% for tier in tiers %}
    <div class="column is-12">
        <p class="title is-3 has-text-centered">
            <span>{{ tier.tier_name }}</span>
        </p>
        <p class="subtitle has-text-centered">
            <span class="icon is-large gh-sponsor"><i class="fas fa-heart fa-2x"></i></span>
        </p>
        <div class="columns is-centered">
            <div class="column is-6 content has-text-centered">
                <p>{{ tier.description | markdownify }}</p>
            </div>
        </div>

        <div class="columns is-multiline is-centered">
            {% for sponsor in tier.sponsors %}
            <div class="column {% if tier.size == 'large' %} is-4-desktop is-6-tablet {% else %} is-3-desktop is-4-tablet {% endif %}">
                <div class="box has-text-centered">
                    <p class="title {% if tier.size == 'large' %} is-4 {% elsif tier.size == 'small' %} is-6 {% else %} is-5 {% endif %}">
                        {{ sponsor.name }}
                    </p>
                    <p class="subtitle is-6">
                        {% if sponsor.profile %}
                        <a href="{{ sponsor.profile }}" class="is-link is-small">View Profile</a>
                        {% else %}
                        &nbsp;
                        {% endif %}
                    </p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="column is-12">
        <hr />
    </div>
    {% endfor %}
</div>

{% endif %}