<!DOCTYPE html>
<html lang="en">
{% include custom-head.html %}

<body>
    {%- include header/blogHeader.html -%}

    <section class="section_post">
        <div class="container">
            {%- if site.monumetricId -%}
            <div class="row">
                <div class="col-md-9 mx-auto">
                    {%- endif -%}
                    <div class="row justify-content-center section-title-wrap">
                        <div class="col-lg-12">
                            <h1 style="font-weight: 900;" class="display-4 m-0 small_description">{{
                                site.data.blog.blog.h1 }}
                            </h1>
                            <p class="lead mb-5 mt-1" style="font-size: 18px;">
                                {{ site.data.blog.blog.description }}
                            </p>
                        </div>
                    </div>
                    {%- if site.monumetricId -%}
                </div>
            </div>
            {%- endif -%}
            <div class="main-content">
                {{content}}
            </div>
            <div class="row">
                {%- if site.monumetricId -%}
                <div class="col-md-9 mx-auto">
                    <div class="row">
                        {%- endif -%}
                        {% for post in paginator.posts %}
                        <div class="
                        {%- if site.monumetricId -%}
                        col-md-6 mb-4 card-group
                        {%- else -%}
                        col-lg-4 col-md-6 mb-4 card-group
                                {%- endif -%}
                            
                        ">
                            <div class="card h-100">
                                <a href="{{ post.url }}">
                                    <img src="{{ post.image }}" loading="lazy" height="215px" width="100%"
                                        class="card-img-top" alt="{{post.title}}" {%- if site.crossorigin -%}
                                        crossorigin="anonymous" {%- endif -%}>
                                </a>
                                <div class="card-body">
                                    <a href="{{ post.url }}" class="anchor_link">
                                        <h4 class="card-title mb-4">{{ post.title }}</h4>
                                    </a>
                                </div>
                                {%- include authors/authors.html -%}
                                <div class="card-footer bg-white">
                                    <div class="wrapfooter">
                                        {% if post.author %}
                                        <a target="_blank" href="/author/{{authorName | downcase  | replace: ' ' , '-' }}" class="meta-footer-thumb">
                                            <img class="author-thumb" loading="lazy" src="{{ image }}"
                                                alt="{{ authorName }}" {%- if site.crossorigin -%}
                                                crossorigin="anonymous" {%- endif -%}>
                                        </a>
                                        {% endif %}

                                        <span class="author-meta">
                                            <span class="post-name">
                                                <a target="_blank" href="/author/{{authorName | downcase  | replace: ' ' , '-' }}">{{authorName}}</a>
                                            </span><br>
                                            <span class="post-date">{{post.date | date_to_string }}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        {%- if site.monumetricId -%}
                    </div>
                </div>
                {%- endif -%}
            </div>
            {%- include paginationBlogPage.html -%}
        </div>

        {% include section/count.html %}
    </section>
    <!-- {%- include section/alertbar.html -%} -->

    {% include script.html %}
    <script src="{{ '/assets/js/TopScroll.js' | relative_url }}" {%- if site.crossorigin -%} crossorigin="anonymous" {%-
        endif -%}></script>
</body>

</html>