{% set page_title = 'Minimal Photography' %}
{% extends 'layouts/layout-minimal-photography.html' %}

{% block content %}

    <div class="container">

        <div class="nk-gap-4 mt-10"></div>
        <h1 class="display-4 text-center fw-400">Travel & Nature Photographer</h1>

        <div class="nk-heading-font text-center mt-30">I sat high in the mountains and thought of all those ants that surrounded me.<br>Remember my friends, we must not allow the bees to disappear.</div>

        <!-- START: Filter -->
        <div class="nk-pagination nk-pagination-nobg nk-pagination-center pt-30">
            <a href="#nk-toggle-filter"><span class="nk-icon-squares"></span></a>
        </div>
        <ul class="nk-isotope-filter">
            <li class="active" data-filter="*">All</li>
            <li data-filter="Interior">Interior</li>
            <li data-filter="Buildings">Buildings</li>
            <li data-filter="Fashion">Fashion</li>
            <li data-filter="Nature">Nature</li>
            <li data-filter="Lifestyle">Lifestyle</li>
        </ul>
        <!-- END: Filter -->

        <div class="nk-portfolio-list nk-isotope nk-isotope-3-cols nk-isotope-gap nk-popup-gallery pt-20">
            {% set items = [
                {
                    img: 'assets/images/demo-minimal-photography-1.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-1-sm.jpg',
                    img_size: '1944x1117',
                    filter: 'Fashion'
                },
                {
                    img: 'assets/images/demo-minimal-photography-2.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-2-sm.jpg',
                    img_size: '1936x916',
                    filter: 'Buildings'
                },
                {
                    img: 'assets/images/demo-minimal-photography-3.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-3-sm.jpg',
                    img_size: '1365x2048',
                    filter: 'Nature'
                },
                {
                    img: 'assets/images/demo-minimal-photography-4.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-4-sm.jpg',
                    img_size: '1943x1458',
                    filter: 'Buildings'
                },
                {
                    img: 'assets/images/demo-minimal-photography-5.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-5-sm.jpg',
                    img_size: '1934x1307',
                    filter: 'Buildings'
                },
                {
                    img: 'assets/images/demo-minimal-photography-6.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-6-sm.jpg',
                    img_size: '1987x1294',
                    filter: 'Fashion'
                },
                {
                    img: 'assets/images/demo-minimal-photography-7.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-7-sm.jpg',
                    img_size: '1231x1821',
                    filter: 'Interior'
                },
                {
                    img: 'assets/images/demo-minimal-photography-8.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-8-sm.jpg',
                    img_size: '1960x1304',
                    filter: 'Nature'
                },
                {
                    img: 'assets/images/demo-minimal-photography-9.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-9-sm.jpg',
                    img_size: '1936x1290',
                    filter: 'Buildings'
                },
                {
                    img: 'assets/images/demo-minimal-photography-10.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-10-sm.jpg',
                    img_size: '1939x1293',
                    filter: 'Nature'
                },
                {
                    img: 'assets/images/demo-minimal-photography-11.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-11-sm.jpg',
                    img_size: '1947x1947',
                    filter: 'Fashion'
                },
                {
                    img: 'assets/images/demo-minimal-photography-12.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-12-sm.jpg',
                    img_size: '1938x1082',
                    filter: 'Nature'
                },
                {
                    img: 'assets/images/demo-minimal-photography-13.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-13-sm.jpg',
                    img_size: '1937x1291',
                    filter: 'Lifestyle'
                },
                {
                    img: 'assets/images/demo-minimal-photography-14.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-14-sm.jpg',
                    img_size: '1975x1312',
                    filter: 'Nature'
                },
                {
                    img: 'assets/images/demo-minimal-photography-15.jpg',
                    img_sm: 'assets/images/demo-minimal-photography-15-sm.jpg',
                    img_size: '1930x1218',
                    filter: 'Lifestyle'
                }
            ] %}
            {% for item in items %}
                <div class="nk-isotope-item" data-filter="{{ item.filter }}">
                    <div class="nk-portfolio-item nk-portfolio-item-info-style-1 nk-portfolio-item-square">
                        <a href="{{ item.img }}" class="nk-portfolio-item-link nk-gallery-item" data-size="{{ item.img_size }}"></a>
                        <div class="nk-portfolio-item-image"><div style="background-image: url('{{ item.img_sm }}')"></div></div>
                        <div class="nk-portfolio-item-info nk-portfolio-item-info-center text-center">
                            <div>
                                <div class="nk-portfolio-item-icon"><span class="pe-7s-expand1"></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="nk-gap-5"></div>
    </div>

    <!-- START: Pagination -->
    <div class="nk-pagination nk-pagination-center">
        <a href="#">Load More Works</a>
    </div>
    <!-- END: Pagination -->

{% endblock %}