    <section class="wrapper bg-light">
      <div class="container py-14 py-md-16">
        <div class="grid grid-view projects-masonry">
          <div class="isotope-filter filter mb-10">
            <p>Filter:</p>
            <ul>
              <li><a class="filter-item active" data-filter="*">All</a></li>
              <li><a class="filter-item" data-filter=".concept">Concept</a></li>
              <li><a class="filter-item" data-filter=".product">Product</a></li>
              <li><a class="filter-item" data-filter=".workshop">Workshop</a></li>
              <li><a class="filter-item" data-filter=".still-life">Still Life</a></li>
            </ul>
          </div>
          <div class="row gx-md-8 gy-10 gy-md-13 isotope">
            <div class="project item col-md-6 col-xl-4 product">
              <figure class="lift rounded mb-6"><a href="./single-project.html"> <img src="/assets/img/photos/cs16.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-purple">Cosmetic</div>
                  <h2 class="post-title h3">Cras Fermentum Sem</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 workshop">
              <figure class="lift rounded mb-6"><a href="./single-project2.html"> <img src="/assets/img/photos/cs17.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-leaf">Coffee</div>
                  <h2 class="post-title h3">Mollis Ipsum Mattis</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 still-life">
              <figure class="lift rounded mb-6"><a href="./single-project3.html"> <img src="/assets/img/photos/cs18.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-violet">Still Life</div>
                  <h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 product">
              <figure class="lift rounded mb-6"><a href="./single-project2.html"> <img src="/assets/img/photos/cs20.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-orange">Product</div>
                  <h2 class="post-title h3">Inceptos Euismod Egestas</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 product">
              <figure class="lift rounded mb-6"><a href="./single-project.html"> <img src="/assets/img/photos/cs19.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-yellow">Product</div>
                  <h2 class="post-title h3">Sollicitudin Ornare Porta</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 workshop">
              <figure class="lift rounded mb-6"><a href="./single-project3.html"> <img src="/assets/img/photos/cs21.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-green">Workshop</div>
                  <h2 class="post-title h3">Ipsum Mollis Vulputate</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 concept">
              <figure class="lift rounded mb-6"><a href="./single-project2.html"> <img src="/assets/img/photos/cs22.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-red">Concept</div>
                  <h2 class="post-title h3">Porta Ornare Cras</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 concept still-life">
              <figure class="lift rounded mb-6"><a href="./single-project.html"> <img src="/assets/img/photos/cs23.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-aqua">Concept</div>
                  <h2 class="post-title h3">Vulputate Sollicitudin</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
            <div class="project item col-md-6 col-xl-4 product">
              <figure class="lift rounded mb-6"><a href="./single-project3.html"> <img src="/assets/img/photos/cs24.jpg" alt="" /></a></figure>
              <div class="project-details d-flex justify-content-center flex-column">
                <div class="post-header">
                  <div class="post-category text-line mb-3 text-purple">Product</div>
                  <h2 class="post-title h3">Magna Tristique Inceptos</h2>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.project -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.grid -->
      </div>
      <!-- /.container -->
    </section>
    <!-- /section -->
  </div>