## -*- coding: utf-8 -*-
<%block name="content">

<div class="row my-3 bg-light text-white shadow-sm d-lg-none">

    % for post in posts:
    <div class="col-12 col-md-4 col-lg-3 my-3">
        <div class="card">
            <img class="card-img-top" style="width: 100%; height: 120px; object-fit: cover;" src=${post.meta('previewimage')}"/>
            <div class="card-img-overlay d-flex flex-column justify-content-end">
                <h3 style="background: rgba(0, 0, 0, 0.75); display: inline; padding: 0.1em; margin: 0;" class="card-title">${post.title(lang)}</h3>
            </div>
            <a href="${post.permalink()}" class="stretched-link"></a>
        </div>
    </div>
% endfor

</div>
</%block>