{% for o in list %}
<aside class='article half-15 mw100 radius-min hbottom-in {{isMobile() ? "top-20" : "top-30"}} adapt relative shadow'>
	<div class='fill bottom-30-in adapt'>
        <figure class='fill hoverflow relative shadow'><img src='{{asset(o.banner.thumbnail)}}' class='cover'></figure>
    </div>
	<div class='absolute bottom left left-20-in right-20-in adapt black alt'>
        <div class='bg-white left-30-in right-30-in top-10-in bottom-15-in radius-min shadow adapt'>
            <span class='p-alt adapt flex row middle success'><i class='left-15-in right-5 adapt border iblock'></i>12/08/2018</span>
            <h2 class='h3 adapt bottom-10 adapt semibold'><a href='{{path("article",{cat:o.category.slug,id:o.id,slug:o.slug})}}'>{{o.title}}</a></h2>
            <div class='flex row space reverse'>
                <a href='{{path("article",{cat:o.category.slug,id:o.id,slug:o.slug})}}' class='flex row middle h4 adapt'>Lire l'article <i class='fa fa-arrow-right h3 adapt left-10 adapt'></i></a>
                <div>
                    <ul class='flex row list center w100'>
                        <li class='icon facebook {{desktop("small")}}'><a href='https://facebook.com/presidencebenin'></a></li>
                        <li class='icon twitter {{desktop("small")}}'><a href='https://twitter.com/presidencebenin'></a></li>
                        <li class='icon whatsapp {{desktop("small")}}'><a href='https://youtube.com/presidencebenin'></a></li>
                    </ul>
                </div>
            </div>
        </div>
	</div>
</aside>
{% endfor %}