<div class="portfolio-area pt50 pb30">
    <div class="container">
        <div class="row masonry-grid">
            <div class="col-md-12">
                <div class="heading text-center pb50">
                    <h1>Photo Gallery</h1>
                </div>
            </div>
            <div class="col-md-4 masonry-column">
                <div class="row">
                    <div class="col-md-12">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/1.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/1.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/2.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/2.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/3.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/3.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 masonry-column">
                <div class="row">
                    <div class="col-md-6">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/4.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/4.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/5.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/5.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/7.png" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/7.png" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 masonry-column">
                <div class="row">
                    <div class="col-md-12">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/3.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/3.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/2.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/2.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="masonry-photo">
                            <span class="thumbnail">
                                   <span class="overlay"></span>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio/1.jpg" alt="">
                            <a href="<?php echo get_template_directory_uri(); ?>/img/portfolio/1.jpg" data-lightbox="image-1" data-title="My caption"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>