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


{% for item in carousel_items %}
    <div class="row mb-4">

        <div class="col-12 col-lg-3 mt-lg-2 mb-3 mb-lg-0 text-start text-lg-center">
            <img src="{{ item.image.file.url }}"
                 title="{{ item.image.name }}"
                 alt="{{ item.image.name }}"
                 class="mw-100"
                 style="max-height: 150px"
                 loading="lazy">
        </div>

        <div class="col-12 col-lg-9 ps-lg-4">
            <h3>
                {{ item.heading }}
            </h3>

            {{ item.pre_heading }}

            {% if item.links %}

            <div class="row mt-3">
                <div class="col">
                {% for link in item.links %}
                    <span
                        class="badge badge-grey-unical square-corners mb-3 me-3 ms-0 pe-5 p-2 mw-100"
                        style="font-size: 100%">
                        <a class="no-color" href="{{ link.url }}">
                            <b>{{ link.get_title }}</b>
                        </a>
                    </span>
                {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% if not forloop.last %}
    <hr class="my-4" style="color: var(--bordeaux_unical)">
    {% endif %}
{% endfor %}
