<div class="post-list">
    {{#foreach posts}}
        <article class="post-card">
            <a class="post-card__media" href="{{url}}">
                {{#if feature_image}}
                    <img src="{{img_url feature_image size="s"}}" alt="{{title}}">
                {{else}}
                    <span class="post-card__media-fallback">{{title}}</span>
                {{/if}}
            </a>
            <div class="post-card__content">
                <h2>
                    <a href="{{url}}">
                        {{#if featured}}
                            <img class="post-card__featured-icon" src="{{asset "icons/bolt.svg"}}" alt="">
                        {{/if}}
                        <span>{{title}}</span>
                    </a>
                </h2>
                {{#if excerpt}}<p>{{excerpt words="22"}}</p>{{/if}}
                <div class="post-card__meta">
                    <time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
                    {{#primary_author}}
                        <span class="meta-divider">/</span>
                        <span class="meta-item">{{name}}</span>
                    {{/primary_author}}
                    {{#primary_tag}}
                        <span class="meta-divider">/</span>
                        <a class="meta-pill" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>{{name}}</a>
                    {{/primary_tag}}
                    <span class="meta-divider">/</span>
                    <span class="meta-item meta-item--comments">
                        <span class="meta-item__icon">◌</span>
                        {{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}
                    </span>
                </div>
            </div>
        </article>
    {{/foreach}}
</div>
