Product Blocks
Start building your website with ready-to-use product blocks.
Static #1
Featured Books
<div class="container">
<header class="d-md-flex justify-content-between align-items-center mb-4 pb-xl-1">
<h2 class="font-size-7 font-weight-medium mb-4 mb-lg-0">Featured Books</h2>
<ul class="nav justify-content-md-center nav-gray-700 flex-nowrap flex-md-wrap overflow-auto overflow-md-visible" id="featuredBooks" role="tablist">
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-md-shrink-1">
<a class="nav-link px-0 active" id="featured-tab" data-toggle="tab" href="#featured" role="tab" aria-controls="featured" aria-selected="true">Featured</a>
</li>
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-md-shrink-1">
<a class="nav-link px-0" id="onsale-tab" data-toggle="tab" href="#onsale" role="tab" aria-controls="onsale" aria-selected="false">On Sale</a>
</li>
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-md-shrink-1">
<a class="nav-link px-0" id="mostviewed-tab" data-toggle="tab" href="#mostviewed" role="tab" aria-controls="mostviewed" aria-selected="false">Most Viewed</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade show active" id="featured" role="tabpanel" aria-labelledby="featured-tab">
<div class="row no-gutters border-top border-left">
<div class="col-lg-4">
<div class="row no-gutters products row-cols-2">
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-1">
<div class="h-100">
<div class="product border-bottom border-right mb-5 mb-lg-0 d-flex h-100">
<div class="product__inner overflow-hidden p-3 p-md-4 my-auto">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-lg-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid height-400 d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body mb-3">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row no-gutters products row-cols-2">
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="onsale" role="tabpanel" aria-labelledby="onsale-tab">
<div class="row no-gutters border-top border-left">
<div class="col-lg-4">
<div class="row no-gutters products row-cols-2">
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-1">
<div class="h-100">
<div class="product border-bottom border-right mb-5 mb-lg-0 d-flex h-100">
<div class="product__inner overflow-hidden p-3 p-md-4 my-auto">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-lg-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid height-400 d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body mb-3">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row no-gutters products row-cols-2">
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="mostviewed" role="tabpanel" aria-labelledby="mostviewed-tab">
<div class="row no-gutters border-top border-left">
<div class="col-lg-4">
<div class="row no-gutters products row-cols-2">
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-1">
<div class="h-100">
<div class="product border-bottom border-right mb-5 mb-lg-0 d-flex h-100">
<div class="product__inner overflow-hidden p-3 p-md-4 my-auto">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-lg-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid height-400 d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body mb-3">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row no-gutters products row-cols-2">
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col product">
<div class="product__inner overflow-hidden p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Static #2
<div class="container space-2">
<div class="row no-gutters row-cols-1 row-cols-lg-3">
<div class="col">
<div class="mb-5 mb-lg-0">
<h6 class="font-weight-medium font-size-7 mb-2 pb-1">New Arrivals</h6>
<div class="border-top border-left">
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">The Ride of a Lifetime: Lessons Learned from 15 Years as CEO...</a>
</h6>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">The Ride of a Lifetime: Lessons Learned from 15 Years as CEO...</a>
</h6>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">The Ride of a Lifetime: Lessons Learned from 15 Years as CEO...</a>
</h6>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="mb-5 mb-lg-0">
<h6 class="font-weight-medium font-size-7 mb-2 pb-1">Featured Products</h6>
<div class="border-top border-left border-lg-left-0">
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on...</a>
</h6>
<span class="font-weight-medium font-size-3">$21</span>
</div>
</div>
</div>
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on...</a>
</h6>
<span class="font-weight-medium font-size-3">$21</span>
</div>
</div>
</div>
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on...</a>
</h6>
<span class="font-weight-medium font-size-3">$21</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<h6 class="font-weight-medium font-size-7 mb-2 pb-1">On-sale Books</h6>
<div class="border-top border-left border-lg-left-0">
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">Russians Among Us: Sleeper Cells, Ghost Stories, and the Hunt...</a>
</h6>
<span class="font-weight-medium font-size-3">$182</span>
</div>
</div>
</div>
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">Russians Among Us: Sleeper Cells, Ghost Stories, and the Hunt...</a>
</h6>
<span class="font-weight-medium font-size-3">$182</span>
</div>
</div>
</div>
<div class="border-right border-bottom p-3">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/70x107" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-3">
<h6 class="font-weight-normal ml-1 mb-2 pb-1 text-lh-md crop-text-2">
<a href="#">Russians Among Us: Sleeper Cells, Ghost Stories, and the Hunt...</a>
</h6>
<span class="font-weight-medium font-size-3">$182</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Static #3
Featured Books
<div class="container space-1">
<h2 class="font-size-26 mb-4">Featured Books</h2>
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-3 row-cols-wd-4 products">
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5 d-lg-none d-wd-block">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5 d-lg-none d-wd-block">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-5 d-lg-none d-wd-block">
<div class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Static #4
Top Categories
<div class="bg-gray-200 space-2 space-lg-3">
<div class="container">
<header class="d-xl-flex justify-content-between align-items-center mb-4 pb-xl-1">
<h2 class="font-size-7 font-weight-medium mb-4 mb-xl-0">Top Categories</h2>
<ul class="nav justify-content-xl-center nav-gray-700 flex-nowrap flex-xl-wrap overflow-auto" role="tablist">
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link px-0 active" id="exampleone-tab" data-toggle="tab" href="#exampleone" role="tab" aria-controls="exampleone" aria-selected="true">Arts & Photography</a>
</li>
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link px-0" id="exampletwo-tab" data-toggle="tab" href="#exampletwo" role="tab" aria-controls="exampletwo" aria-selected="false">Food & Drink</a>
</li>
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link px-0" id="examplethree-tab" data-toggle="tab" href="#examplethree" role="tab" aria-controls="examplethree" aria-selected="false">Romance</a>
</li>
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link px-0" id="examplefour-tab" data-toggle="tab" href="#examplefour" role="tab" aria-controls="examplefour" aria-selected="false">Travel</a>
</li>
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link px-0" id="examplefive-tab" data-toggle="tab" href="#examplefive" role="tab" aria-controls="examplefive" aria-selected="false">Health</a>
</li>
<li class="nav-item mx-5 mb-1 flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link px-0" id="examplesix-tab" data-toggle="tab" href="#examplesix" role="tab" aria-controls="examplesix" aria-selected="false">Natural History</a>
</li>
</ul>
</header>
<div class="tab-content">
<div class="tab-pane fade show active" id="exampleone" role="tabpanel" aria-labelledby="exampleone-tab">
<div class="row no-gutters">
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-2 mb-lg-0">
<div class="h-100">
<div class="product product__space mx-1 mb-2 mb-lg-0 bg-white h-100">
<div class="product__inner d-flex overflow-hidden py-5 py-md-6 py-lg-8 px-3 px-md-4 px-lg-6 px-xl-8 h-100">
<div class="mt-auto woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-xl-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium mb-4">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="exampletwo" role="tabpanel" aria-labelledby="exampletwo-tab">
<div class="row no-gutters">
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-2 mb-lg-0">
<div class="h-100">
<div class="product product__space mx-1 mb-2 mb-lg-0 bg-white h-100">
<div class="product__inner d-flex overflow-hidden py-5 py-md-6 py-lg-8 px-3 px-md-4 px-lg-6 px-xl-8 h-100">
<div class="mt-auto woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-xl-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium mb-4">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="examplethree" role="tabpanel" aria-labelledby="examplethree-tab">
<div class="row no-gutters">
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-2 mb-lg-0">
<div class="h-100">
<div class="product product__space mx-1 mb-2 mb-lg-0 bg-white h-100">
<div class="product__inner d-flex overflow-hidden py-5 py-md-6 py-lg-8 px-3 px-md-4 px-lg-6 px-xl-8 h-100">
<div class="mt-auto woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-xl-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium mb-4">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="examplefour" role="tabpanel" aria-labelledby="examplefour-tab">
<div class="row no-gutters">
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-2 mb-lg-0">
<div class="h-100">
<div class="product product__space mx-1 mb-2 mb-lg-0 bg-white h-100">
<div class="product__inner d-flex overflow-hidden py-5 py-md-6 py-lg-8 px-3 px-md-4 px-lg-6 px-xl-8 h-100">
<div class="mt-auto woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-xl-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium mb-4">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="examplefive" role="tabpanel" aria-labelledby="examplefive-tab">
<div class="row no-gutters">
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-2 mb-lg-0">
<div class="h-100">
<div class="product product__space mx-1 mb-2 mb-lg-0 bg-white h-100">
<div class="product__inner d-flex overflow-hidden py-5 py-md-6 py-lg-8 px-3 px-md-4 px-lg-6 px-xl-8 h-100">
<div class="mt-auto woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-xl-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium mb-4">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="examplesix" role="tabpanel" aria-labelledby="examplesix-tab">
<div class="row no-gutters">
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-2 mb-lg-0">
<div class="h-100">
<div class="product product__space mx-1 mb-2 mb-lg-0 bg-white h-100">
<div class="product__inner d-flex overflow-hidden py-5 py-md-6 py-lg-8 px-3 px-md-4 px-lg-6 px-xl-8 h-100">
<div class="mt-auto woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail mb-5 mb-xl-8">
<a href="#" class="d-block "><img src="https://placehold.it/254x400" class="img-fluid d-block mx-auto mx-lg-0 px-xl-7 attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body">
<div class="text-uppercase font-size-1 mb-2 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title mb-2 font-size-22 font-weight-regular"><a href="#">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">L.J. Shen</a></div>
<div class="price d-flex align-items-center font-weight-medium mb-4">
<ins class="text-decoration-none mr-2">
<span class="woocommerce-Price-amount amount font-size-3 text-dark">
<span class="woocommerce-Price-currencySymbol">$</span>15</span>
</ins>
<del class="font-size-1 font-weight-regular text-secondary-gray-700">
<span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span>
</del>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-3" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 product-4">
<div class="row no-gutters">
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="products">
<div class="product product__space mx-1 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4 bg-white ">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Static #5
Featured Products
<div class="container mb-2 space-2">
<div class="row no-gutters row-cols-1 row-cols-lg-3">
<div class="col">
<div class="mb-5 mb-lg-0">
<h6 class="font-weight-medium font-size-7 mb-2 pb-1">New Arrivals</h6>
<div class="py-3 pr-3">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 text-truncate"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Ride of a Lifetime: Lessons Learned from 15 Years as CEO...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Robert Iger</a></div>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
<div class="py-3 pr-3">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 text-truncate"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Ride of a Lifetime: Lessons Learned from 15 Years as CEO...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Robert Iger</a></div>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
<div class="py-3 pr-3">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 text-truncate"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Ride of a Lifetime: Lessons Learned from 15 Years as CEO...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Robert Iger</a></div>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="mb-5 mb-lg-0">
<h6 class="font-weight-medium font-size-7 mb-2 pb-1">Featured Products</h6>
<div class="py-3 pr-4">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 text-truncat0"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton
</a></div>
<span class="font-weight-medium font-size-3">$21</span>
</div>
</div>
</div>
<div class="py-3 pr-4">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 text-truncat0"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton
</a></div>
<span class="font-weight-medium font-size-3">$21</span>
</div>
</div>
</div>
<div class="py-3 pr-4">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 text-truncat0"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton
</a></div>
<span class="font-weight-medium font-size-3">$21</span>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<h6 class="font-weight-medium font-size-7 mb-2 pb-1">On-sale Books</h6>
<div class="py-3 pr-3">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 mb-0 text-truncate"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">Russians Among Us: Sleeper Cells, Ghost Stories, and the Hunt...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Gordon Corera</a></div>
<span class="font-weight-medium font-size-3">$182</span>
</div>
</div>
</div>
<div class="py-3 pr-3">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 mb-0 text-truncate"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">Russians Among Us: Sleeper Cells, Ghost Stories, and the Hunt...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Gordon Corera</a></div>
<span class="font-weight-medium font-size-3">$182</span>
</div>
</div>
</div>
<div class="py-3 pr-3">
<div class="media my-1 mr-1">
<a class="d-block" href="#">
<img src="https://placehold.it/90x138" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-4">
<div class="text-uppercase font-size-1 mb-0 text-truncate"><a href="#">Hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">Russians Among Us: Sleeper Cells, Ghost Stories, and the Hunt...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Gordon Corera</a></div>
<span class="font-weight-medium font-size-3">$182</span>
</div>
</div>
</div>
</div>
</div>
</div>
Static #6
Trending Books
View All
<div class="container space-top-2">
<header class="d-md-flex justify-content-between align-items-center mb-5">
<h2 class="font-size-7 mb-4 mb-md-0">Trending Books</h2>
<a href="#" class="d-flex align-items-center h-primary">View All<span class="flaticon-next font-size-3 ml-2"></span></a>
</header>
<ul class="products list-unstyled mb-0 row row-cols-2 row-cols-md-3 row-cols-xl-4 row-cols-wd-5">
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
<span class="badge badge-md badge-primary-green position-absolute badge-pos--top-right text-white rounded-circle d-flex flex-column align-items-center justify-content-center">21%
</span>
</div>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col d-xl-none d-wd-block">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col d-xl-none d-wd-block">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
<span class="badge badge-md badge-primary-green position-absolute badge-pos--top-right text-white rounded-circle d-flex flex-column align-items-center justify-content-center">21%
</span>
</div>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Static #7
Featured Books
<div class="container">
<header class="d-md-flex justify-content-between mb-5">
<h2 class="font-size-7">Featured Books</h2>
<ul class="nav nav-gray-700 flex-nowrap flex-md-wrap overflow-auto overflow-md-visible" role="tablist">
<li class="nav-item mx-4 flex-shrink-0 flex-md-shrink-1">
<a class="nav-link pb-1 px-0 active" id="history-pill-tab" data-toggle="tab" href="#history-pill" role="tab" aria-controls="history-pill" aria-selected="true">On Sale</a>
</li>
<li class="nav-item mx-4 flex-shrink-0 flex-md-shrink-1">
<a class="nav-link pb-1 px-0" id="romance-pill-tab" data-toggle="tab" href="#romance-pill" role="tab" aria-controls="romance-pill" aria-selected="true">New Arrivals</a>
</li>
<li class="nav-item ml-4 flex-shrink-0 flex-md-shrink-1">
<a class="nav-link pb-1 px-0" id="travel-pill-tab" data-toggle="tab" href="#travel-pill" role="tab" aria-controls="travel-pill" aria-selected="true">Most Viewed</a>
</li>
</ul>
</header>
<div class="tab-content" id="pills-tabcontent">
<div class="tab-pane fade show active" id="history-pill" role="tabpanel" aria-labelledby="history-pill-tab">
<div class="row">
<div class="col-lg-3 col-xl-3 col-wd-2 mb-5 mb-md-0 product-2">
<ul class="products row d-block d-md-flex d-lg-block list-unstyled mb-0">
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-xl-3 mb-5 mb-lg-0">
<div class="banner px-3 py-8 py-lg-0 px-lg-5 px-wd-8 d-flex h-100 justify-content-center align-items-center rounded-md bg-punch-light border">
<div class="banner__body">
<div class="banner__image pb-1 mb-5">
<img src="https://placehold.it/250x200" class="img-fluid" alt="image-description">
</div>
<h3 class="banner_text m-0">
<span class="d-block mb-1 font-size-7 font-weight-regular text-dark">Get Extra</span>
<span class="d-block mb-3 font-size-10 font-weight-medium text-primary">Sale -25%</span>
<span class="d-block mb-5 text-uppercase font-size-4 font-weight-regular text-gray-400">On Order Over $100</span>
</h3>
<a href="#" class="btn btn-dark btn-wide rounded-md">View More</a>
</div>
</div>
</div>
<div class="col-lg-5 col-xl-6 col-wd-7">
<ul class="products row row-cols-2 row-cols-lg-2 row-cols-wd-3 list-unstyled mb-0">
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-5 mb-lg-0 md-wd-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Open Book</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Until the End of Time: Mind, Matter</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>89</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col d-lg-none d-wd-block">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>10</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col d-lg-none d-wd-block">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Camino Winds</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>9</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="romance-pill" role="tabpanel" aria-labelledby="romance-pill-tab">
<div class="row">
<div class="col-lg-3 col-xl-3 col-wd-2 mb-5 mb-md-0 product-2">
<ul class="products row d-block d-md-flex d-lg-block list-unstyled mb-0">
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-xl-3 mb-5 mb-lg-0">
<div class="banner px-3 py-8 py-lg-0 px-lg-5 px-wd-8 d-flex h-100 justify-content-center align-items-center rounded-md bg-punch-light border">
<div class="banner__body">
<div class="banner__image pb-1 mb-5">
<img src="https://placehold.it/250x200" class="img-fluid" alt="image-description">
</div>
<h3 class="banner_text m-0">
<span class="d-block mb-1 font-size-7 font-weight-regular text-dark">Get Extra</span>
<span class="d-block mb-3 font-size-10 font-weight-medium text-primary">Sale -25%</span>
<span class="d-block mb-5 text-uppercase font-size-4 font-weight-regular text-gray-400">On Order Over $100</span>
</h3>
<a href="#" class="btn btn-dark btn-wide rounded-md">View More</a>
</div>
</div>
</div>
<div class="col-lg-5 col-xl-6 col-wd-7">
<ul class="products row row-cols-2 row-cols-lg-2 row-cols-wd-3 list-unstyled mb-0">
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-5 mb-lg-0 md-wd-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Open Book</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Until the End of Time: Mind, Matter</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>89</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col d-lg-none d-wd-block">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>10</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col d-lg-none d-wd-block">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Camino Winds</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>9</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="travel-pill" role="tabpanel" aria-labelledby="travel-pill-tab">
<div class="row">
<div class="col-lg-3 col-xl-3 col-wd-2 mb-5 mb-md-0 product-2">
<ul class="products row d-block d-md-flex d-lg-block list-unstyled mb-0">
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-xl-3 mb-5 mb-lg-0">
<div class="banner px-3 py-8 py-lg-0 px-lg-5 px-wd-8 d-flex h-100 justify-content-center align-items-center rounded-md bg-punch-light border">
<div class="banner__body">
<div class="banner__image pb-1 mb-5">
<img src="https://placehold.it/250x200" class="img-fluid" alt="image-description">
</div>
<h3 class="banner_text m-0">
<span class="d-block mb-1 font-size-7 font-weight-regular text-dark">Get Extra</span>
<span class="d-block mb-3 font-size-10 font-weight-medium text-primary">Sale -25%</span>
<span class="d-block mb-5 text-uppercase font-size-4 font-weight-regular text-gray-400">On Order Over $100</span>
</h3>
<a href="#" class="btn btn-dark btn-wide rounded-md">View More</a>
</div>
</div>
</div>
<div class="col-lg-5 col-xl-6 col-wd-7">
<ul class="products row row-cols-2 row-cols-lg-2 row-cols-wd-3 list-unstyled mb-0">
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-5 mb-lg-0 md-wd-5">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Open Book</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Until the End of Time: Mind, Matter</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>89</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col d-lg-none d-wd-block">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>10</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col d-lg-none d-wd-block">
<div class="mb-0">
<div class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Camino Winds</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>9</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Static #8
Trending Books
View All
<div class="bg-gray-200 space-bottom-2 space-top-3">
<div class="container">
<header class="d-md-flex justify-content-between align-items-center mb-5">
<h2 class="font-size-7 mb-3 mb-md-0">Trending Books</h2>
<a href="#" class="d-flex align-items-center h-primary">View All<span class="flaticon-next font-size-3 ml-2"></span></a>
</header>
<ul class="products list-unstyled mb-0 row row-cols-2 row-cols-md-3 row-cols-xl-4 row-cols-wd-5">
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
<span class="badge badge-md badge-primary-green position-absolute badge-pos--top-right text-white rounded-circle d-flex flex-column align-items-center justify-content-center">21%
</span>
</div>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col d-xl-none d-wd-block">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col d-xl-none d-wd-block">
<div class="product product__space product__space-primary border rounded-md bg-white mb-5">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
<span class="badge badge-md badge-primary-green position-absolute badge-pos--top-right text-white rounded-circle d-flex flex-column align-items-center justify-content-center">21%
</span>
</div>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Product Sidebar
<div class="container space-1">
<h2 class="font-size-26 mb-4">Top Rating</h2>
<div class="px-4 pt-4 border mb-5">
<div class="media mb-5">
<a class="d-block" href="#">
<img class="img-fluid" src="https://placehold.it/60x90" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal">
<a href="#">Sold on a Monday: A Novel</a>
</h6>
<span class="font-weight-medium">$37</span>
</div>
</div>
<div class="media mb-5">
<a class="d-block" href="#">
<img class="img-fluid" src="https://placehold.it/60x90" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal">
<a href="#">The Dancing Girls: An absolutely gripping</a>
</h6>
<span class="font-weight-medium">$37</span>
</div>
</div>
<div class="media mb-5">
<a class="d-block" href="#">
<img class="img-fluid" src="https://placehold.it/60x90" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal">
<a href="#">Lessons Learned from 15 Years as CEO...</a>
</h6>
<span class="font-weight-medium">$37</span>
</div>
</div>
<div class="media mb-5">
<a class="d-block" href="#">
<img class="img-fluid" src="https://placehold.it/60x90" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal">
<a href="#">All the Light We Cannot See: A Novel</a>
</h6>
<span class="font-weight-medium">$37</span>
</div>
</div>
<div class="media mb-5">
<a class="d-block" href="#">
<img class="img-fluid" src="https://placehold.it/60x90" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal">
<a href="#">The Guardians: A Novel</a>
</h6>
<span class="font-weight-medium">$37</span>
</div>
</div>
</div>
</div>
Deal of the Month
AUTHOR OF THE MONTH
Jessica Simpson
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div class="bg-gray-200 space-bottom-2 space-bottom-md-0">
<div class="container space-top-2 space-top-xl-3 px-3">
<div class="row">
<div class="col-lg-4 col-wd-3 d-flex">
<img class="img-fluid mb-5 mb-lg-0 mt-auto" src="../../assets/img/400x759/img1.png" alt="Image-Description">
</div>
<div class="col-lg-8 col-wd-9">
<div class="mb-8">
<span class="text-gray-400 font-size-2">AUTHOR OF THE MONTH</span>
<h6 class="font-size-7 ont-weight-medium mt-2 mb-3 pb-1">
<a class="link-black-100" href="#">Jessica Simpson</a>
</h6>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
<ul class="products list-unstyled row no-gutters row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-wd-4 my-0 mb-md-8 mb-wd-12">
<li class="product product__no-border col border-0 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875 mx-1 bg-white">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__no-border col border-0 mb-2 mb-lg-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875 mx-1 bg-white">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__no-border col border-0 mb-2 mb-md-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875 mx-1 bg-white">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div><div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="d-md-none d-wd-block product product__no-border col border-0 mr-0">
<div class="product__inner overflow-hidden p-3 p-md-4d875 mx-1 bg-white">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" tabindex="0">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg" tabindex="0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg" tabindex="0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Banner with Product card
Related to items you've viewed
View All
<div class="container">
<div class="space-3">
<header class="d-md-flex justify-content-between align-items-center mb-5">
<h2 class="font-size-7 mb-4 mb-md-0">Related to items you've viewed</h2>
<a href="#" class="d-flex align-items-center text-dark font-weight-medium">View All<span class="flaticon-next font-size-3 ml-2"></span></a>
</header>
<div class="row bg-white border-top border-left no-gutters">
<div class="col-lg-4 border-right border-bottom">
<div class="py-5 pt-lg-5 pb-lg-7 text-center">
<div class="my-lg-1">
<div class="mb-3">
<img src="https://placehold.it/230x185" class="img-fluid" alt="image-description">
</div>
<div>
<h2 class="font-size-7 mb-2 pb-1 text-lh-sm">
<span class="hero__title-line-1 font-weight-normal d-inine-block">Get Extra</span>
<span class="hero__title-line-2 font-weight-bold text-primary d-block">Sale -25%</span>
</h2>
<div class="mb-3">
<span class="font-size-4 font-weight-normal text-gray-400">ON ORDER OVER $100</span>
</div>
<a href="#" class="banner_btn btn rounded-0 btn-wide btn-dark text-white">View More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row row-cols-md-2 no-gutters">
<div class="col border-right border-bottom p-4">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-5">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock,and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton</a></div>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
<div class="col border-right border-bottom p-4">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-5">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock,and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton</a></div>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
<div class="col border-right border-bottom p-4">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-5">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock,and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton</a></div>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
<div class="col border-right border-bottom p-4">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-5">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock,and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton</a></div>
<span class="font-weight-medium font-size-3">$37</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Product Sidebar #v2
<div class="container space-1">
<h6 class="font-weight-medium font-size-7 mb-4 pb-1">Top Rating</h6>
<div class="border-top border-right border-left p-4d75">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-5">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock,and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton</a></div>
<span class="font-weight-medium font-size-3">$21</span>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
</div>
</div>
<div class="border-top border-right border-left p-4d75 border-bottom">
<div class="media m-1">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image" alt="image-description">
</a>
<div class="media-body ml-5">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">hardcover</a></div>
<h6 class="font-weight-normal mb-1 text-lh-md crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock,and Big Life Lessons Down on...</a>
</h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Hilarie Burton</a></div>
<span class="font-weight-medium font-size-3">$21</span>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
</div>
</div>
</div>