<!-- vertical light card -->
         <div class="card-vertical card-light card-shadow">
             <div class="card-img-container">
                 <img src="..." alt="product-image" />
             </div>
             <div class="card-text">
                 <h1 class="card-title title-sm">
                   Sony DSC W830 Cyber-Shot 20.1 MP Point and
                     Shoot Camera (Black) with 8X Optical Zoom</h1>
                 <h2 class="card-price">10,999/-</h2>
             </div>
             <div class="card-nav">
                 <div class="card-cta-btn">
                     <button class="btn primary-btn-sm add-cart">Add to Cart</button>
                     <div class="card-nav-icon">
                         <button class="btn primary-text-btn-sm icon-md">
                           <i class="far fa-heart"></i>
                         </button>
                         <button class="btn primary-text-btn-sm icon-md">
                           <i class="fas fa-share-alt"></i>
                         </button>
                     </div>
                 </div>
             </div>
         </div>