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

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 pb-2 overflow-hidden">
            <div class="col-md-12 apac-block">

                {% if apac_block.thumbnailImage is not null %}
                    {% set imagePath = asset(apacImagesDirectory ~ apac_block.thumbnailImage)  %}
                    <img class="img-fluid" src="{{ imagePath }}" alt="Thumbnail image for: {{ apac_block.name }}">
                {% endif %}
            </div>

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

            <div class="col-md-12 text-black">
                <p>
                    {{ apac_block.description|default("")|striptags|slice(0, 100)  ~ '...' }}
                </p>
            </div>

            <div class="col-md-12">

                <a class="text-decoration-none btn btn-secondary acba-blue-bg rounded-pill"
                   title="{{"Read more - " ~ apac_block.name }}"
                   href="{{ url('frontend_apacs', {'apacCategoryId':apac_block.id, 'apacCategoryTitle':apac_block.name}) }}">{{ apac_block.name }}</a>

            </div>

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