<div class="card is-shadowless">
                        <div class="columns is-gapless">
                            <div class="column">
                                <div class="card-image">
                                    <figure class="image is-4by5 is-relative">
                                        <a href="{{ post.url }}">
                                        <img 
                                            data-src="{{ post.image.path | default: "https://via.placeholder.com/290x362.png?text=image+is+4by5"}}?nf_resize=smartcrop&w=290&h=362" 
                                            data-lowsrc="{{ post.image.path | default: "https://via.placeholder.com/290x362.png?text=image+is+4by5"}}?nf_resize=smartcrop&w=72&h=90" 
                                            alt="Image by {{page.image.author}} on {{page.image.source}}"
                                            class="lazyload blur-up">
                                        </a>
                                        {% assign postcontent = post.content %}
                                        {% capture readingtime %}{% include themes/jmblog-theme/components/reading-time.html %}{% endcapture %}
                                        {% if readingtime.size > 1 %}
                                        <span class="tag is-white is-ontop">{{ readingtime | strip }}</span>
                                        {% endif %}
                                    </figure>
                                </div>
                            </div>
                            <div class="column">
                                <div class="card-content">
                                    <div class="media">
                                        {% comment %} <div class="media-left">
                                        <figure class="image is-48x48">
                                            <img class="is-rounded" src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
                                        </figure>
                                        </div> {% endcomment %}
                                        <div class="media-content">
                                        <h2 class="title is-4"><a href="{{post.url}}" class="has-text-black">{{ post.title }}</a></h2>
                                        </div>
                                    </div>

                                    <div class="content">
                                        <a href="{{ post.url }}" class="has-text-black">
                                            {{ post.summary | truncatewords: 15 }}
                                        </a>
                                            <div class="tags">
                                                {% for tag in post.tags limit:2 %}
                                                <span class="tag">#{{tag}}</span>
                                                {% endfor %}
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>