<section class="pt-4 pb-4">
<div class="container" data-animate="fadeInUp">
<div class="col-lg-12">
<div class="heading-text heading-section">
<h2><span>{{ 'components.nos_services.titre' | admintrans | raw }}</span></h2>
<p>{{ 'components.nos_services.description' | admintrans | raw }} </p>
</div>
</div>
</div>
<div class="container">
<div class="portfolio-3-columns">
{% for service in services | slice(0,3) %}
<!-- portfolio item -->
<div class="portfolio-item overlay-links" data-animate="fadeInUp" data-animate-delay="{{ 300 * loop.index0 }}">
<div class="portfolio-item-wrap">
<a href="{{ path('preview-service',{'id' : service.id}) }}" data-lightbox="ajax"></a>
<div class="portfolio-image">
<img alt="{{ service.altDescription }}" {{ responsive_src(asset('images/upload/' ~ service.image)) | raw }}>
</div>
<div class="portfolio-description">
<a href="{{ path('preview-service',{'id' : service.id}) }}" data-lightbox="ajax">
<h3>{{ service.titre }}</h3>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<hr class="space">
<div class="text-center pt-5">
<a class="btn btn-light text-center" href="{{ path('services') }}" data-animate="fadeInUp">{{ 'components.nos_services.tous' | admintrans | raw }}</a>
</div>
</div>
</section>