{% set posts = __SELF__.posts %}
<div class="row">
    {% for post in posts if post.postorder != null %}
        {% if loop.index == 1 %}
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6 Bloco-1 no-padding-2">
                <div class="pdf-thumb-box">
                    <div class="pdf-thumb-box-a kue">
                        <div class="pdf-thumb-box-overlay">
                            <span class="fa-stack fa-lg">
                                <button type="submit" class="btn-imgs" data-attach-loading  data-toggle="modal" data-target=".bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}">
                                <i class="fa fa-plus-circle fa-2x pink" aria-hidden="true"></i>
                                </button>
                            </span>
                        </div>
                        <div id="main">
                            <img class="img-responsive" src="{{ post.featured_images.first.getThumb(577, 791, 'crop') }}" alt="{{ post.title }}">
                        </div>
                    </div>
                </div>
                <div class="vertical-social-box">
                </div>
            </div>
            <div class="modal fade bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content bg-modal padding-modal">
                        <div class="container margin-modal">
                            <div class="row">
                                <div class="col-md-6 img-modal">
                                    {% for image in post.featured_images %}
                                        {% if loop.index >= 2 %}
                                            {% if loop.index <= 5 %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                    <img src="{{ image.getThumb(250, 250, 'crop') }}" />
                                                </a>
                                            {% else %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                </a>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="col-md-6">
                                    <div class="post-heading">
                                        <h1>{{ post.title }}</h1>
                                        <h4 style="color: #fff"><time datetime="{{ post.published_at|date('Y') }}">{{ post.published_at|date('Y') }}</time></h4>
                                    </div>
                                    <div class="post-content">
                                        <p>
                                            {{ post.content|raw }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% elseif loop.index == 2 %}
            <div class="col-sm-6 col-md-4 col-lg-3 Bloco-2 no-padding-2">
                <div class="pdf-thumb-box">
                    <div class="pdf-thumb-box-a kue">
                        <div class="pdf-thumb-box-overlay">
                            <span class="fa-stack fa-lg">
                                <button type="submit" class="btn-imgs" data-attach-loading  data-toggle="modal" data-target=".bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}">
                                <i class="fa fa-plus-circle fa-2x pink" aria-hidden="true"></i>
                                </button>
                            </span>
                        </div>
                        <img class="img-responsive" src="{{ post.featured_images.first.getThumb(285, 388, 'crop') }}" alt="{{ post.title }}">
                    </div>
                </div>
                <div class="vertical-social-box">
                </div>
            </div>
            <div class="modal fade bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content bg-modal padding-modal">
                        <div class="container margin-modal">
                            <div class="row">
                                <div class="col-md-6 img-modal">
                                    {% for image in post.featured_images %}
                                        {% if loop.index >= 2 %}
                                            {% if loop.index <= 5 %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                    <img src="{{ image.getThumb(250, 250, 'crop') }}" />
                                                </a>
                                            {% else %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                </a>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="col-md-6">
                                    <div class="post-heading">
                                        <h1>{{ post.title }}</h1>
                                        <h4 style="color: #fff"><time datetime="{{ post.published_at|date('Y') }}">{{ post.published_at|date('Y') }}</time></h4>
                                    </div>
                                    <div class="post-content">
                                        <p>
                                            {{ post.content|raw }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% elseif loop.index == 3 %}
            <div class="col-sm-6 col-md-4 col-lg-3 Bloco-2 no-padding-2">
                <div class="pdf-thumb-box">
                    <div class="pdf-thumb-box-a kue">
                        <div class="pdf-thumb-box-overlay">
                            <span class="fa-stack fa-lg">
                                <button type="submit" class="btn-imgs" data-attach-loading  data-toggle="modal" data-target=".bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}">
                                <i class="fa fa-plus-circle fa-2x pink" aria-hidden="true"></i>
                                </button>
                            </span>
                        </div>
                        <img class="img-responsive" src="{{ post.featured_images.first.getThumb(285, 387, 'crop') }}" alt="{{ post.title }}">
                    </div>
                </div>
                <div class="vertical-social-box">
                </div>
            </div>
            <div class="modal fade bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content bg-modal padding-modal">
                        <div class="container margin-modal">
                            <div class="row">
                                <div class="col-md-6 img-modal">
                                    {% for image in post.featured_images %}
                                        {% if loop.index >= 2 %}
                                            {% if loop.index <= 5 %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                    <img src="{{ image.getThumb(250, 250, 'crop') }}" />
                                                </a>
                                            {% else %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                </a>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="col-md-6">
                                    <div class="post-heading">
                                        <h1>{{ post.title }}</h1>
                                        <h4 style="color: #fff"><time datetime="{{ post.published_at|date('Y') }}">{{ post.published_at|date('Y') }}</time></h4>
                                    </div>
                                    <div class="post-content">
                                        <p>
                                            {{ post.content|raw }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% elseif loop.index == 4 %}
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6  Bloco-3 no-padding-2" style="margin-top: 2px;">
                <div class="pdf-thumb-box">
                    <div class="pdf-thumb-box-a kue">
                        <div class="pdf-thumb-box-overlay">
                            <span class="fa-stack fa-lg">
                                <button type="submit" class="btn-imgs" data-attach-loading  data-toggle="modal" data-target=".bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}">
                                <i class="fa fa-plus-circle fa-2x pink" aria-hidden="true"></i>
                                </button>
                            </span>
                        </div>
                        <img class="img-responsive" src="{{ post.featured_images.first.getThumb(578, 395, 'crop') }}" alt="{{ post.title }}">
                    </div>
                </div>
                <div class="vertical-social-box">
                </div>
            </div>
            <div class="modal fade bd-example-modal-lg-{{__SELF__.id}}-{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content bg-modal padding-modal">
                        <div class="container margin-modal">
                            <div class="row">
                                <div class="col-md-6 img-modal">
                                    {% for image in post.featured_images %}
                                        {% if loop.index >= 2 %}
                                            {% if loop.index <= 5 %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                    <img src="{{ image.getThumb(250, 250, 'crop') }}" />
                                                </a>
                                            {% else %}
                                                <a href="{{ image.path }}" data-fancybox="images-{{__SELF__.id}}-{{ post.id }}">
                                                </a>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="col-md-6">
                                    <div class="post-heading">
                                        <h1>{{ post.title }}</h1>
                                        <h4 style="color: #fff"><time datetime="{{ post.published_at|date('Y') }}">{{ post.published_at|date('Y') }}</time></h4>
                                    </div>
                                    <div style="color: #fff !important;">
                                            {{ post.content|raw }}
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
        {% endif %}
    {% else %}
        <li class="no-data">{{ noPostsMessage }}</li>
    {% endfor %}
</div>