<div class="relative">

    <div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6 pb-16 pt-5">
        {% for post in __SELF__.posts %}
            <a href="{{post.href}}" class="flex flex-col h-full box shadow-lg hover:shadow-2xl rounded-xl overflow-hidden bg-sky-50" target="_BLANK">
                {% if post.featuredImage %}
                    <img {{ post.featuredImage | resize('box', 'calc(100vw - 1.5rem)|640:calc(50vw - 1.5rem)|1024:calc(33vw - 1.5rem)|1152:360px') }} class="object-cover w-full h-48">
                {% endif %}
                <div class="flex items-end justify-between px-6 py-3">
                    {% if __SELF__.logo %}
                    <script type="text/html" data-lazy data-src="logo">
                        <img src="{{__SELF__.logo|media}}" class="w-8">
                    </script>
                    <div data-dest="logo"></div>
                    {% endif %}
                    <div class="text-xs text-gray-500">{{post.created_at | human}}</div>
                </div>
                <div class="flex-grow p-6 pt-0 prose prose-sm max-w-none text-gray-600">
                    {{post.intro}} …
                </div>
                <div class="flex px-6 py-3 items-center border border-t">
                    {% partial 'ui/sprite' icon=post.page.icon class='w-6 h-6 mr-3 fill-current text-sky-700' %}
                    <span class="text-sm text-gray-600">Beitrag anschauen</span>
                </div>
            </a>
        {% endfor %}
    </div>
</div>

