<section class="products-1 py-5">
    <div class="fui-container">

      <!-- PRODUCTS -->
      <div class="row">

        <!-- SINGLE PRODUCT -->
        <div class="col-md-4 col-sm-6 col-12 single-product-col">
          <div class="fui-card single-product">
            <img src="https://source.unsplash.com/200x200/" class="img img-cover w-100">
            <div class="fui-card-body">
              <a href="" class="product-title">Circa Staple Slim Jean</a>
              <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, repellendus?</p>
              <div class="pricing">
                <del>$250</del>
                <span class="price">$150</span>
              </div>
              <div class="text-center">
                <a href="" class="add-to-cart-btn fui-btn fui-btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>

        <!-- SINGLE PRODUCT -->
        <div class="col-md-4 col-sm-6 col-12 single-product-col">
          <div class="fui-card single-product">
            <img src="https://source.unsplash.com/200x200/" class="img img-cover w-100">
            <div class="fui-card-body">
              <a href="" class="product-title">Circa Staple Slim Jean</a>
              <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, repellendus?</p>
              <div class="pricing">
                <del>$250</del>
                <span class="price">$150</span>
              </div>
              <div class="text-center">
                <a href="" class="add-to-cart-btn fui-btn fui-btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>

        <!-- SINGLE PRODUCT -->
        <div class="col-md-4 col-sm-6 col-12 single-product-col">
          <div class="fui-card single-product">
            <img src="https://source.unsplash.com/200x200/" class="img img-cover w-100">
            <div class="fui-card-body">
              <a href="" class="product-title">Circa Staple Slim Jean</a>
              <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, repellendus?</p>
              <div class="pricing">
                <del>$250</del>
                <span class="price">$150</span>
              </div>
              <div class="text-center">
                <a href="" class="add-to-cart-btn fui-btn fui-btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>

        <!-- SINGLE PRODUCT -->
        <div class="col-md-4 col-sm-6 col-12 single-product-col">
          <div class="fui-card single-product">
            <img src="https://source.unsplash.com/200x200/" class="img img-cover w-100">
            <div class="fui-card-body">
              <a href="" class="product-title">Circa Staple Slim Jean</a>
              <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, repellendus?</p>
              <div class="pricing">
                <del>$250</del>
                <span class="price">$150</span>
              </div>
              <div class="text-center">
                <a href="" class="add-to-cart-btn fui-btn fui-btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>

        <!-- SINGLE PRODUCT -->
        <div class="col-md-4 col-sm-6 col-12 single-product-col">
          <div class="fui-card single-product">
            <img src="https://source.unsplash.com/200x200/" class="img img-cover w-100">
            <div class="fui-card-body">
              <a href="" class="product-title">Circa Staple Slim Jean</a>
              <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, repellendus?</p>
              <div class="pricing">
                <del>$250</del>
                <span class="price">$150</span>
              </div>
              <div class="text-center">
                <a href="" class="add-to-cart-btn fui-btn fui-btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>

        <!-- SINGLE PRODUCT -->
        <div class="col-md-4 col-sm-6 col-12 single-product-col">
          <div class="fui-card single-product">
            <img src="https://source.unsplash.com/200x200/" class="img img-cover w-100">
            <div class="fui-card-body">
              <a href="" class="product-title">Circa Staple Slim Jean</a>
              <p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, repellendus?</p>
              <div class="pricing">
                <del>$250</del>
                <span class="price">$150</span>
              </div>
              <div class="text-center">
                <a href="" class="add-to-cart-btn fui-btn fui-btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </section>

.products-1 .single-product-col {
  margin-bottom: 20px;
  }

  .products-1 .single-product-col .single-product {
  border-radius: 0;
  }

  .products-1 .single-product-col .single-product:hover {
  border-color: #008cff;
  }

  .products-1 .single-product-col .single-product .img {
  height: 250px;
  }

  .products-1 .single-product-col .single-product .product-title {
  font-size: 18px;
  color: black;
  text-align: center;
  display: block;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 500;
  }

  .products-1 .single-product-col .single-product .info {
  text-align: center;
  font-size: 14px;
  }

  .products-1 .single-product-col .single-product .pricing {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 15px;
  }

  .products-1 .single-product-col .single-product .pricing .price {
  color: #008cff;
  }

  .products-1 .single-product-col .single-product .fui-btn {
  text-transform: uppercase;
  padding: 12px 25px;
  }