{% load i18n %}
{% load static %}


{% if carousel_items %}

    {% with carousel_items|length as count %}
    <div class="row d-lg-flex">

        {% for item in carousel_items %}
            {% if count > 2 %}
            <div class="col-12 col-lg-4">
            {% elif count == 1 %}
            <div class="col-12">
            {% else %}
            <div class="col-12 col-lg-6">
            {% endif %}
                <!--start card-->
                <div class="card-wrapper card-space">
                    <div class="card card-bg no-after">
                        <div class="card-body">
                            <div class="img-responsive-wrapper mb-3">
                                <div class="img-responsive img-responsive-panoramic">
                                    <figure class="img-wrapper">
                                        <img src="{{ item.image.file.url }}"
                                             title="{{ item.image.name }}"
                                             alt="{{ item.image.name }}"
                                             loading="lazy">
                                    </figure>
                                </div>
                            </div>

                            {% if item.pre_heading %}
                            <div class="category-top">
                                <span>{{ item.pre_heading }}</span>
                            </div>
                            {% endif %}
                            {% if item.heading %}
                            <h4 class="card-title">
                                {{ item.heading }}
                            </h4>
                            {% endif %}
                            {% if item.description %}
                            <p class="card-text">
                                {{ item.description }}
                            </p>
                            {% endif %}

                            {% for link in item.links %}
                            <p>
                                <a class="read-more"
                                   style="position: inherit"
                                   href="{{ link.url }}">
                                    <span class="text">{{ link.get_title }}</span>
                                    <svg class="icon">
                                        <use xlink:href="{% static 'svg/sprites.svg' %}#it-arrow-right"></use>
                                    </svg>
                                </a>
                            </p>
                            {% endfor %}

                        </div>
                    </div>
                </div>
                <!--end card-->
            </div>
        {% endfor %}

    </div>
    {% endwith %}

{% endif %}
