Gallery
The photo galleries are arranged in a unique masonry style
Gallery 01
<div class="row galleries">
<div class="col-sm-6 col-md-5 mb-6">
<div class="item item-size-1-1">
<a href="../../images/gallery-lg-01.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="01">
<div class="card-img img"
style="background-image:url('../../images/gallery-01.jpg')">
</div>
</a>
</div>
</div>
<div class="col-md-7">
<div class="row h-100">
<div class="col-sm-6 col-md-4 mb-6">
<div class="item item-size-1-1">
<a href="../../images/gallery-lg-02.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="01">
<div class="card-img img"
style="background-image:url('../../images/gallery-02.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-6">
<div class="item item-size-1-1">
<a href="../../images/gallery-lg-03.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="01">
<div class="card-img img"
style="background-image:url('../../images/gallery-03.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-6">
<div class="item item-size-1-1">
<a href="../../images/gallery-lg-04.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="01">
<div class="card-img img"
style="background-image:url('../../images/gallery-04.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-6">
<div class="item item-size-1-1">
<a href="../../images/gallery-lg-05.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="01">
<div class="card-img img"
style="background-image:url('../../images/gallery-05.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-6">
<div class="item item-size-1-1">
<a href="../../images/gallery-lg-06.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="01">
<div class="card-img img"
style="background-image:url('../../images/gallery-06.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4 mb-6">
<div class="item item-size-1-1">
<div class="card p-0 hover-zoom-in hover-change-image">
<a href="../../images/gallery-lg-07.jpg" class="card-img"
data-gtf-mfp="true" data-gallery-id="01"
style="background-image:url('../../images/gallery-07.jpg')">
</a>
<a href="#"
class="card-img-overlay text-white d-flex align-items-center justify-content-center flex-column hover-white hover-image bg-dark-opacity-04">
<p class="mb-0 fs-40 font-weight-500 r lh-13 w-100 text-center">+20</p>
<p class="mb-0 fs-13 lh-2 text-uppercase w-100 text-center">View more</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Gallery 02
<div class="row galleries">
<div class="col-sm-8 mb-6">
<div class="item item-size-2-1">
<a href="../../images/gallery-lg-08.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="02">
<div class="card-img img"
style="background-image:url('../../images/gallery-08.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-4 mb-6">
<div class="item item-size-2-1">
<a href="../../images/gallery-lg-09.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="02">
<div class="card-img img"
style="background-image:url('../../images/gallery-09.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-6 mb-6">
<div class="item item-size-2-1">
<a href="../../images/gallery-lg-10.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="02">
<div class="card-img img"
style="background-image:url('../../images/gallery-10.jpg')">
</div>
</a>
</div>
</div>
<div class="col-sm-6 mb-6">
<div class="item item-size-2-1">
<a href="../../images/gallery-lg-11.jpg" class="card p-0 hover-zoom-in"
data-gtf-mfp="true" data-gallery-id="02">
<div class="card-img img"
style="background-image:url('../../images/gallery-11.jpg')">
</div>
</a>
</div>
</div>
</div>