{% if content.service_id is defined and content.service_id is not null %}
    {% set service = getService(content.service_id) %}
    {% if service is not null %}
        {% if element.showTitle %}
            <h2 class="titreh2">{{ service.nom }}</h2>
        {% endif %}
        <div class="services row">
            {% for item in service.serviceItems %}
                <div class="service-content col-lg-{{ service.nbColComputer }} col-md-{{ service.nbColTab }} col-xs-{{ service.nbColComputer }}">
                    <div class="card" style="width: 100%;">
                        {% if item.icon is not null %}
                            <p class="text-center service-icon">
                                {% include 'components/icon.html.twig' with { 'icon': item.icon, 'css': '', 'style': 'font-size: 72px;' } %}
                            </p>
                        {% endif %}
                        <div class="card-body">
                            {% if item.showTitle %}
                                <h5 class="card-title">{{ item.titre }}</h5>
                            {% endif %}
                            {% if item.showDescription %}
                                <p class="card-text">{{ item.description }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endif %}