{% set header_title = 'Gallery' %}
{% set background_top = 'assets/images/bg-top-3.png' %}
{% set breadcrumbs = [
    '<a href="index.html">Home</a>',
    '<span>Gallery</span>'
] %}
{% extends 'layouts/layout-1.html' %}

{% block content %}
<div class="container">
    <div class="row vertical-gap">
        <div class="col-lg-8">
            <!-- START: Latest Pictures -->
            <h2 class="nk-decorated-h-2 h3"><span><span class="text-main-1">Latest</span> Pictures</span></h2>
            <div class="nk-gap"></div>
            <div class="nk-popup-gallery">
                <div class="row vertical-gap">
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-1.jpg" class="nk-gallery-item" data-size="1016x572">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-1-thumb.jpg" alt="">
                            </a>
                            <div class="nk-gallery-item-description">
                                <h4>Called Let</h4>
                                Divided thing, land it evening earth winged whose great after. Were grass night. To Air itself saw bring fly fowl. Fly years behold spirit day greater of wherein winged and form. Seed open don't thing midst created dry every greater divided of, be man is. Second Bring stars fourth gathering he hath face morning fill. Living so second darkness. Moveth were male. May creepeth. Be tree fourth.
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-2.jpg" class="nk-gallery-item" data-size="1188x594">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-2-thumb.jpg" alt="">
                            </a>
                            <div class="nk-gallery-item-description">
                                Seed open don't thing midst created dry every greater divided of, be man is. Second Bring stars fourth gathering he hath face morning fill. Living so second darkness. Moveth were male. May creepeth. Be tree fourth.
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-3.jpg" class="nk-gallery-item" data-size="625x350">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-3-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-4.jpg" class="nk-gallery-item" data-size="873x567">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-4-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-5.jpg" class="nk-gallery-item" data-size="471x269">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-5-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-6.jpg" class="nk-gallery-item" data-size="472x438">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-6-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-7.jpg" class="nk-gallery-item" data-size="960x540">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-7-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-8.jpg" class="nk-gallery-item" data-size="473x390">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-8-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-9.jpg" class="nk-gallery-item" data-size="750x486">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-9-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-10.jpg" class="nk-gallery-item" data-size="960x557">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-10-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-11.jpg" class="nk-gallery-item" data-size="600x362">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-11-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="nk-gallery-item-box">
                            <a href="assets/images/gallery-12.jpg" class="nk-gallery-item" data-size="1200x670">
                                <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                                <img src="assets/images/gallery-12-thumb.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Latest Pictures -->

            <!-- START: Recent Galleries-->
            <div class="nk-gap-2"></div>
            <h2 class="nk-decorated-h-2 h3"><span><span class="text-main-1">Recent</span> Galleries</span></h2>
            <div class="nk-gap"></div>
            <div class="row vertical-gap">
                <div class="col-md-6">
                    <div class="nk-gallery-item-group">
                        <a href="#" class="nk-gallery-item">
                            <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                            <img src="assets/images/gallery-group-1.jpg" alt="">
                        </a>
                        <div class="nk-gallery-item-description">
                            <h4 class="nk-gallery-item-description-title h5">Screenshots Gallery</h4>
                            <div class="nk-gallery-item-description-info">
                                <span class="far fa-image"></span>
                                <span>58</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-group">
                        <a href="#" class="nk-gallery-item">
                            <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                            <img src="assets/images/gallery-group-2.jpg" alt="">
                        </a>
                        <div class="nk-gallery-item-description">
                            <h4 class="nk-gallery-item-description-title h5">Art Gallery</h4>
                            <div class="nk-gallery-item-description-info">
                                <span class="far fa-image"></span>
                                <span>96</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-group">
                        <a href="#" class="nk-gallery-item">
                            <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                            <img src="assets/images/gallery-group-3.jpg" alt="">
                        </a>
                        <div class="nk-gallery-item-description">
                            <h4 class="nk-gallery-item-description-title h5">RTS Gallery</h4>
                            <div class="nk-gallery-item-description-info">
                                <span class="far fa-image"></span>
                                <span>167</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-group">
                        <a href="#" class="nk-gallery-item">
                            <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                            <img src="assets/images/gallery-group-4.jpg" alt="">
                        </a>
                        <div class="nk-gallery-item-description">
                            <h4 class="nk-gallery-item-description-title h5">Action Gallery</h4>
                            <div class="nk-gallery-item-description-info">
                                <span class="far fa-image"></span>
                                <span>4</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-group">
                        <a href="#" class="nk-gallery-item">
                            <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                            <img src="assets/images/gallery-group-5.jpg" alt="">
                        </a>
                        <div class="nk-gallery-item-description">
                            <h4 class="nk-gallery-item-description-title h5">Moba Gallery</h4>
                            <div class="nk-gallery-item-description-info">
                                <span class="far fa-image"></span>
                                <span>17</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="nk-gallery-item-group">
                        <a href="#" class="nk-gallery-item">
                            <div class="nk-gallery-item-overlay"><span class="ion-eye"></span></div>
                            <img src="assets/images/gallery-group-6.jpg" alt="">
                        </a>
                        <div class="nk-gallery-item-description">
                            <h4 class="nk-gallery-item-description-title h5">Indie Gallery</h4>
                            <div class="nk-gallery-item-description-info">
                                <span class="far fa-image"></span>
                                <span>40</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Recent Galleries -->

            <!-- START: Video Galleries-->
            <div class="nk-gap-2"></div>
            <h2 class="nk-decorated-h-2 h3"><span><span class="text-main-1">Video</span> Galleries</span></h2>
            <div class="nk-gap"></div>
            <div class="row vertical-gap">
                <div class="col-md-6">
                    <h4>Double rainbow? What does it mean?</h4>
                    <div class="nk-plain-video" data-video="https://www.youtube.com/watch?v=eBERVWYa-1Y"></div>
                </div>
                <div class="col-md-6">
                    <h4>We will never be slaves! But we will... be conquerors</h4>
                    <div class="nk-plain-video" data-video="https://www.youtube.com/watch?v=6cXyQg_5uoc"></div>
                </div>
                <div class="col-md-6">
                    <h4>There is only the Emperor, and he is our shield and protector</h4>
                    <div class="nk-plain-video" data-video="https://www.youtube.com/watch?v=pYC44YPb_5k"></div>
                </div>
                <div class="col-md-6">
                    <h4>It looks like we don't have any Quotes for this title yet</h4>
                    <div class="nk-plain-video" data-video="https://www.youtube.com/watch?v=BXJPwBCJES8"></div>
                </div>
            </div>
            <!-- END: Video Galleries -->
        </div>
        <div class="col-lg-4">
            <!--
                START: Sidebar

                Additional Classes:
                    .nk-sidebar-left
                    .nk-sidebar-right
                    .nk-sidebar-sticky
            -->
            <aside class="nk-sidebar nk-sidebar-right nk-sidebar-sticky">
                {% include "shared/sidebar-all.html" %}
            </aside>
            <!-- END: Sidebar -->
        </div>
    </div>
</div>

<div class="nk-gap-2"></div>
{% endblock %}