<!-- vertical dark card -->
           <div class="card-vertical card-dark">
               <button class="btn secondary-text-btn-sm card-close">
                 <i class="fas fa-times"></i></button>
               <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-to-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>