{{ range .Pages.ByPublishDate.Reverse }}
{{ $post := . }}
<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
    {{ with .Params.image }}
        {{ with $post.Resources.GetMatch . }}
            {{ with .Resize "400x" }}
                <div style="flex-shrink: 0;">
                    <a href="{{ $post.Permalink }}">
                        <img src="{{ .Permalink }}" alt="{{ $post.Title }}" style="max-width: 300px; height: auto; border-radius: 4px;">
                    </a>
                </div>
            {{ end }}
        {{ end }}
    {{ end }}
    <div style="flex-grow: 1;">
        <h3 class="title is-4" style="margin-bottom: 0.5rem;">
            <a href="{{ $post.Permalink }}">{{ $post.Title | markdownify }}</a>
        </h3>
        {{ if $post.Params.date }}
        <p class="has-text-grey" style="margin-bottom: 0.5rem;">
            {{ $post.Date.Format (.Site.Params.dateFormat | default ":date_medium") }}
        </p>
        {{ end }}
        {{ if $post.Summary }}
        <p>{{ $post.Summary | truncate 150 }}</p>
        {{ end }}
    </div>
</div>
{{ end }}