{% assign maxRelated = 4 %}
{% assign minCommonTags = 1 %}
{% assign maxRelatedCounter = 0 %}

{% assign posts = site.posts |  where_exp: "item", "item.slug != page.slug" %}
{% if posts.size >= 1 %}






            {% for post in posts %}
                {% assign sameTagCount = 0 %}

                {% for category in post.categories %}
                    {% if page.categories contains category %}
                        {% assign sameTagCount = sameTagCount | plus: 1 %}
                    {% endif %}
                {% endfor %}

                {% if sameTagCount >= minCommonTags %}
                    {% comment %} {% increment my_counter %} {% endcomment %}

                    {% if maxRelatedCounter == 0 %}
                    <section class="hero is-dark">
                        <div class="hero-body">
                            <h4 class="title is-6 is-spaced">Related posts</h4>
                            
                            <div class="columns is-multiline">
                    {% endif %}

                    <!-- START related component -->
                    <div class="column is-one-quarter">
                        <a href="{{ post.url }}">
                        <div class="box has-min-height px-3 py-3 is-shadowless">
                            <article class="media">
                                <div class="media-left is-hidden-tablet-only">
                                    <figure class="image is-64x64">
                                        <img src="{{ post.image.path | default: '/assets/img/ph.png' | append: '?nf_resize=smartcrop&w=64&h=64' }}" alt="{{ post.title }}">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="is-size-6 has-text-black">
                                        {{ post.title | truncatewords: 15 }}
                                    </p>
                                </div>
                            </article>
                        </div>
                        </a>
                    </div>

                     <!-- END related component -->
                    {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
                    {% if maxRelatedCounter >= maxRelated %}
                                          
                    {% break %}
                    {% endif %}
                {% endif %}

            {% endfor %}
            {% if maxRelatedCounter > 0 %}
                    </div>
                </div>
            </section>  
            {% endif %}
{% endif %}