<!-- Projects -->
<section id="projects-section" class="container g-py-100">
  <div class="text-center g-mb-50">
    <h2 class="h1 g-color-black g-font-weight-600">Branding Projects</h2>
    <p class="lead">This is where we begin to visualize your napkin sketches and make them into pixels.</p>
  </div>

  <div class="row no-gutters g-mx-minus-10">
    <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
      <!-- Projects -->
      <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-purple--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
        <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img1.png" alt="Image Description">
        <span class="g-font-weight-600 g-font-size-12 text-uppercase">Mockups</span>
        <h3 class="h4 g-font-weight-600 mb-0">Kitchen Tools</h3>
        <a class="u-link-v2" href="#!"></a>
      </div>
      <!-- End Projects -->
    </div>

    <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
      <!-- Projects -->
      <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-cyan--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
        <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img2.png" alt="Image Description">
        <span class="g-font-weight-600 g-font-size-12 text-uppercase">Others</span>
        <h3 class="h4 g-font-weight-600 mb-0">Brochure</h3>
        <a class="u-link-v2" href="#!"></a>
      </div>
      <!-- End Projects -->
    </div>

    <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
      <!-- Projects -->
      <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-teal--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
        <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img3.png" alt="Image Description">
        <span class="g-font-weight-600 g-font-size-12 text-uppercase">Hi-Tech</span>
        <h3 class="h4 g-font-weight-600 mb-0">MacBook Pro</h3>
        <a class="u-link-v2" href="#!"></a>
      </div>
      <!-- End Projects -->
    </div>

    <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
      <!-- Projects -->
      <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-lightred--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
        <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img4.png" alt="Image Description">
        <span class="g-font-weight-600 g-font-size-12 text-uppercase">Hi-tech</span>
        <h3 class="h4 g-font-weight-600 mb-0">Latest VR product</h3>
        <a class="u-link-v2" href="#!"></a>
      </div>
      <!-- End Projects -->
    </div>

    <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
      <!-- Projects -->
      <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-primary--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
        <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img5.png" alt="Image Description">
        <span class="g-font-weight-600 g-font-size-12 text-uppercase">Others</span>
        <h3 class="h4 g-font-weight-600 mb-0">Brochure</h3>
        <a class="u-link-v2" href="#!"></a>
      </div>
      <!-- End Projects -->
    </div>

    <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
      <!-- Projects -->
      <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-pink--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
        <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img6.png" alt="Image Description">
        <span class="g-font-weight-600 g-font-size-12 text-uppercase">Cosmetics</span>
        <h3 class="h4 g-font-weight-600 mb-0">Spa Cosmetics</h3>
        <a class="u-link-v2" href="#!"></a>
      </div>
      <!-- End Projects -->
    </div>
  </div>
</section>
<!-- End Projects -->
