{{ partial:header }}

<section class="bg-secondary">
    <div class="container">
        <div class="row masonry-loader">
            <div class="col-sm-12 text-center">
                <div class="spinner"></div>
            </div>
        </div>
        <div class="row masonry masonryFlyIn mb40">
            {{ collection from="articles" }}
                    <div class="col-sm-4 post-snippet masonry-item">
                        <a href="{{ url }}">
                        {{ if image_teaser }}
                            <img alt="Post Image" src="{{ glide :src="image_teaser" width="720" height="480" }}" />
                        {{ else }}
                            <img alt="Post Image" src="{{ glide :src="background" width="720" height="480" }}" />
                        {{ /if }}
                        </a>
                        <div class="inner">
                            <a href="{{ url }}">
                                <h5 class="mb0">{{ article_title }}</h5>
                                <span class="inline-block mb16">{{ date  | iso_format('ll') }}</span>
                            </a>
                            <hr>
                            <p>
                                {{ article_teaser }}
                            </p>
                            <a class="btn btn-sm" href="{{ url }}">En savoir plus</a>
                        </div>
                    </div>
            {{ /collection }}
        </div>
    </div>
    <!--end of container-->
</section>