<section class="cards">
<!-- === cards header === -->
<div class="section-header">
<div class="container">
<h2 class="title"><span>{{ 'Near by'|trans }}</span></h2>
<p>{{ 'Interesting places to visit.'|trans }}</p>
</div>
</div>
<div class="container _nearby">
<div class="row">
{% for key, place in places %}
{% if loop.first %}
<div class="col-xs-12 col-md-8">
<figure class="">
<figcaption style="background-image:url({{ asset('/images/'~place.image) }})">
<img src="{{ asset('/images/'~place.image) }}" alt="">
</figcaption>
<a href="{{ url('place', {'slug': place.slug}) }}" class="btn btn-clean" onclick="">{{ place.title }}</a>
</figure>
</div>
{% else %}
<div class="col-xs-12 col-sm-6 col-md-4">
<figure class="">
<figcaption style="background-image:url({{ asset('/images/'~place.image) }})">
<img src="{{ asset('/images/'~place.image) }}" alt="">
</figcaption>
<a href="{{ url('place', {'slug': place.slug}) }}" class="btn btn-clean" onclick="">{{ place.title }}</a>
</figure>
</div>
{% endif %}
{% endfor %}
<div class="col-xs-12 col-sm-6 col-md-4">
<figure>
<figcaption style="background-image:url({{ asset('images/food_and_drinks.jpeg') }})">
<img src="{{ asset('images/food_and_drinks.jpeg') }}" alt="">
</figcaption>
<a href="{{ url('nearby_food') }}" class="btn btn-clean">{{ 'Food & drink'|trans }}</a>
</figure>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<figure>
<figcaption style="background-image:url({{ asset('images/outdoor.png') }})">
<img src="{{ asset('images/outdoor.png') }}" alt="">
</figcaption>
<a href="{{ url('nearby_outdoor') }}" class="btn btn-clean">{{ 'Outdoor activities'|trans }}</a>
</figure>
</div>
</div>
</div>
</section>