{% if regions is defined and regions is not null and regions|length > 0 %}
    {% set counter = 1 %}
    {% for region in regions %}

        <div class="col col-xs-12 col-sm-12 col-md-12 col-lg-2 pb-2 overflow-hidden">
            <div class="col-md-12">
                {% set imagePath = asset('build/images/eastern-africa.png')  %}
                {% if region.thumbnailImage is not null %}
                    {% set imagePath = asset(regionImagesDir ~ region.thumbnailImage)  %}
                {% endif %}
                <img src="{{ imagePath }}" alt="Thumbnail image for: {{ region.name }}">
            </div>

            <div class="col-md-12 community-countries-heading my-3">
                <h3 class="acba-blue-font py-2">
                    {{ region.name }}
                </h3>
            </div>

            <div class="col-md-12 acba-blue-font {#  community-countries-list#} d-none">

                {% for country in region.regionCountries %}
                    <p>
                        {{ country.name }}
                    </p>
                {% endfor %}

{#                {{ block.content|default("")|raw}}#}
            </div>

            <div class="col-md-12">
                <a title="Read More"
                   href="{{ url('frontend_region_countries', {'regionId': region.id}) }}"
                   class="btn btn-secondary rounded-pill acba-blue-bg ">Read More</a>
            </div>

        </div>
    {% endfor %}
{% endif %}