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

<div class="carousel slide d-lg-none" style="height: 10rem;" data-ride="carousel" data-interval="3000">
    <div class="carousel-inner">
        % for post in posts:
        <div class="carousel-item ${'active' if loop.index == 0 else ''}">
            <a href="${post.permalink()}">
                <img class="d-block img-fluid w-100" src="${post.meta('previewimage')}" alt="large carousel slide" style="height: 160px; object-fit: cover;">
                <div class="carousel-caption d-sm-block">
                    <h1 style="background: rgba(0, 0, 0, 0.75); display: inline; padding: 0.1em; margin: 0;">${post.meta('previewtext', lang) or post.title(lang)}</h1>
                </div>
            </a>
        </div>
        % endfor
    </div>
</div>
<div class="row d-none d-lg-flex">
    % for post in posts:
    <div class="col-6 col-sm-4">
        <div class="card text-white bg-light shadow-sm">
            <div class="card-body">
                <img class="card-img-top" style="width: 100%; height: 160px; object-fit: cover;" src="${post.meta('previewimage')}" alt="CCC logo">
                <div class="card-img-overlay d-flex flex-column justify-content-end">
                    <h1 style="background: rgba(0, 0, 0, 0.75); display: inline; padding: 0.1em; margin: 0;" class="card-title">${post.meta('previewtext', lang) or post.title(lang)}</h1>
                </div>
            </div>
            <a href="${post.permalink()}" class="stretched-link"></a>
        </div>
    </div>
    % endfor
</div>
</%block>