<div class="post-list home-post-list flex flex-col divide-y divide-brd" data-load-more-list>
    {{#foreach posts}}
        <article class="post {{post_class}} relative flex flex-row items-start gap-3 text-typ py-4 group overflow-hidden" data-post-card{{#if featured}} data-featured{{/if}}>
            <a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16 ">
                {{#if feature_image}}
                    <figure class="block rounded-lg overflow-hidden" role="none">
                        <img class="w-full aspect-square sm:aspect-video object-cover hover:opacity-90 transition-all blur-0" src="{{img_url feature_image size="s"}}" alt="{{title}}">
                    </figure>
                {{else}}
                    <span class="block w-full aspect-square sm:aspect-video rounded-lg bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
                {{/if}}
            </a>
            <div class="relative min-w-0 flex-3 md:flex-4 flex flex-col gap-0.5 justify-between h-full self-stretch" data-post-card-content>
                <h2 class="text-sm font-medium leading-tight flex flex-wrap gap-y-0.5 gap-x-1.5 items-end max-w-[90%]" data-post-card-title>
                    <a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
                        {{#if featured}}
                            <span data-post-featured="" class="inline-flex text-brand -mr-0.5 [&amp;_svg]:-mt-0.5">
                                <i class="icon icon-bolt size-4 stroke-1 fill-current" role="presentation">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bolt"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path></svg>
                                </i>
                            </span>
                        {{/if}}
                        <span>{{title}}</span>
                    </a>
                </h2>
                
                <p class="text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis flex-1 min-h-[2.2rem]" data-post-card-excerpt>
                    {{#if excerpt}}
                        {{excerpt words="24"}}
                    {{/if}}
                </p>
                <div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone [&>*:not(:last-child)]:after:content-['/'] [&>*:not(:last-child)]:after:ml-2 sm:[&>*:not(:last-child)]:after:ml-1.5 [&>*:not(:last-child)]:after:text-brd" data-post-card-info>
                    <time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
                    {{#primary_author}}
                        <a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
                    {{/primary_author}}
                    {{#primary_tag}}
                        <ul class="flex flex-wrap items-center font-medium" data-post-card-tags>
                            <li{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
                                <a href="{{url}}" class="bg-accent/10 px-1.5 py-px rounded-sm text-typ hover:bg-accent/5 hover:text-accent">{{name}}</a>
                            </li>
                        </ul>
                    {{/primary_tag}}
                    {{#unless access}}
                        <span class="font-medium">Members</span>
                    {{/unless}}
                    <a data-post-card-comments class="flex gap-1 items-center hover:opacity-75" href="{{url}}#ghost-comments">
                        <i class="icon icon-comments size-3.5 stroke-2 -mt-px pointer-events-none" role="presentation">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"></path></svg>
                        </i>
                        <span class="pointer-events-none">{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}</span>
                    </a>
                </div>
                <button data-post-share-toggle class="absolute top-0 md:top-auto md:bottom-0 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer md:opacity-0 md:invisible group-hover:opacity-100 group-hover:visible transition-[opacity,visibility]" type="button" aria-label="Share this post">
                    <i class="icon icon-share size-4 stroke-2 pointer-events-none" role="presentation">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-share-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7"></path></svg>
                    </i>
                </button>
            </div>
        </article>
    {{/foreach}}
</div>
