Category
Category #v1
<!-- Category v1 -->
<div class="container space-1">
<header class="mb-5 d-md-flex justify-content-between align-items-center">
<h2 class="font-size-7 mb-3 mb-md-0">Featured Categories</h2>
<a href="#" class="h-primary d-block">All Categories <i class="glyph-icon flaticon-next"></i></a>
</header>
<ul class="list-unstyled my-0 row row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-wd-5">
<li class="product-category col mb-4 mb-xl-0">
<div class="product-category__inner bg-indigo-light px-6 py-5">
<div class="product-category__icon font-size-12 text-primary-indigo"><i class="glyph-icon flaticon-gallery"></i></div>
<div class="product-category__body">
<h3 class="text-truncate font-size-3">Arts & Photography</h3>
<a href="#" class="stretched-link text-dark">Shop Now</a>
</div>
</div>
</li>
<li class="product-category col mb-4 mb-xl-0">
<div class="product-category__inner bg-tangerine-light px-6 py-5">
<div class="product-category__icon font-size-12 text-tangerine"><i class="glyph-icon flaticon-cook"></i></div>
<div class="product-category__body">
<h3 class="text-truncate font-size-3">Food & Drink</h3>
<a href="#" class="stretched-link text-dark">Shop Now</a>
</div>
</div>
</li>
<li class="product-category col mb-4 mb-xl-0">
<div class="product-category__inner bg-chili-light px-6 py-5">
<div class="product-category__icon font-size-12 text-chili"><i class="glyph-icon flaticon-like"></i></div>
<div class="product-category__body">
<h3 class="text-truncate font-size-3">Romance</h3>
<a href="#" class="stretched-link text-dark">Shop Now</a>
</div>
</div>
</li>
<li class="product-category col mb-4 mb-xl-0">
<div class="product-category__inner bg-carolina-light px-6 py-5">
<div class="product-category__icon font-size-12 text-carolina"><i class="glyph-icon flaticon-doctor"></i></div>
<div class="product-category__body">
<h3 class="text-truncate font-size-3">Health</h3>
<a href="#" class="stretched-link text-dark">Shop Now</a>
</div>
</div>
</li>
<li class="product-category col mb-4 mb-xl-0 d-xl-none d-wd-block">
<div class="product-category__inner bg-punch-light px-6 py-5">
<div class="product-category__icon font-size-12 text-punch"><i class="glyph-icon flaticon-resume"></i></div>
<div class="product-category__body">
<h3 class="text-truncate font-size-3">Biography</h3>
<a href="#" class="stretched-link text-dark">Shop Now</a>
</div>
</div>
</li>
</ul>
</div>
<!-- End Category v1 -->
Category #v2
Featured Categories
All Categories
<!-- Category V2 -->
<div class="container">
<header class="d-md-flex justify-content-between align-items-center mb-5 pt-5">
<h2 class="font-size-7 mb-4 mb-md-0">Featured Categories</h2>
<a href="#" class="d-flex h-primary">All Categories<span class="flaticon-next font-size-3 ml-2"></span></a>
</header>
<ul class="px-5 nav justify-content-between bg-gray-200 rounded-md pb-2 py-md-3 mb-5 flex-nowrap flex-xl-wrap overflow-auto overflow-xl-visible" role="tablist">
<li class="nav-item flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link font-weight-medium active nav-link-caret" id="pills-one-example2-tab" data-toggle="pill" href="#pills-one-example2" role="tab" aria-controls="pills-one-example2" aria-selected="true">
<div class="text-center">
<figure class="d-md-block mb-0 text-primary-indigo">
<i class="glyph-icon flaticon-gallery font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Arts & Photography</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link font-weight-medium nav-link-caret" id="pills-two-example2-tab" data-toggle="pill" href="#pills-two-example2" role="tab" aria-controls="pills-two-example2" aria-selected="true">
<div class="text-center">
<figure class="d-md-block mb-0 text-tangerine">
<i class="glyph-icon flaticon-cook font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Food & Drink</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link font-weight-medium nav-link-caret" id="pills-three-example2-tab" data-toggle="pill" href="#pills-three-example2" role="tab" aria-controls="pills-three-example2" aria-selected="true">
<div class="text-center">
<figure class="d-md-block mb-0 text-chili">
<i class="glyph-icon flaticon-like font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Romance</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link font-weight-medium nav-link-caret" id="pills-four-example2-tab" data-toggle="pill" href="#pills-four-example2" role="tab" aria-controls="pills-four-example2" aria-selected="true">
<div class="text-center">
<figure class="d-md-block mb-0 text-carolina">
<i class="glyph-icon flaticon-doctor font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Health</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link font-weight-medium nav-link-caret" id="pills-five-example2-tab" data-toggle="pill" href="#pills-five-example2" role="tab" aria-controls="pills-five-example2" aria-selected="true">
<div class="text-center">
<figure class="d-md-block mb-0 text-punch">
<i class="glyph-icon flaticon-resume font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Biography</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link font-weight-medium nav-link-caret" id="pills-six-example2-tab" data-toggle="pill" href="#pills-six-example2" role="tab" aria-controls="pills-six-example2" aria-selected="true">
<div class="text-center">
<figure class="d-md-block mb-0">
<i class="icon glyph-icon flaticon-jogging font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Sports</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0 flex-xl-shrink-1">
<a class="nav-link font-weight-medium nav-link-caret" id="pills-seven-example2-tab" data-toggle="pill" href="#pills-seven-example2" role="tab" aria-controls="pills-seven-example2" aria-selected="true">
<div class="text-center">
<figure class="d-md-block mb-0">
<i class="icon glyph-icon flaticon-baby-boy font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Children</span>
</div>
</a>
</li>
</ul>
</div>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade active show" id="pills-one-example2" role="tabpanel" aria-labelledby="pills-one-example2-tab">
<div class="pt-2">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-wd-6 ">
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-two-example2" role="tabpanel" aria-labelledby="pills-two-example2-tab">
<div class="pt-2">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-wd-6 ">
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-three-example2" role="tabpanel" aria-labelledby="pills-three-example2-tab">
<div class="pt-2">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-wd-6 ">
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-four-example2" role="tabpanel" aria-labelledby="pills-four-example2-tab">
<div class="pt-2">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-wd-6 ">
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-five-example2" role="tabpanel" aria-labelledby="pills-four-example2-tab">
<div class="pt-2">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-wd-6 ">
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-six-example2" role="tabpanel" aria-labelledby="pills-four-example2-tab">
<div class="pt-2">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-wd-6 ">
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-seven-example2" role="tabpanel" aria-labelledby="pills-four-example2-tab">
<div class="pt-2">
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-wd-6 ">
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
<div class="col d-xl-none d-wd-block">
<div class="mb-5 products">
<div class="product product__space 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"></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>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Category V2 -->
Category #v3
Featured Categories
All Categories
<!-- Category V3 -->
<div class="bg-gray-200">
<div class="space-2 space-xl-3">
<div class="container">
<header class="d-md-flex justify-content-between align-items-center mb-5">
<h2 class="font-size-7 mb-4 mb-lg-0">Featured Categories</h2>
<a href="#" class="d-flex">All Categories<span class="flaticon-next font-size-3 ml-2"></span></a>
</header>
<ul class="nav justify-content-between flex-nowrap pb-2 py-md-3 js-slick-carousel u-slick"
data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow-centered--y bg-transparent border-0 text-dark"
data-arrow-left-classes="fas flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n5" data-arrow-right-classes="fas flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n5"
data-slides-show="5"
data-responsive='[{
"breakpoint": 1265,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-primary-indigo">
<i class="glyph-icon flaticon-gallery font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Arts & Photography</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-tangerine">
<i class="glyph-icon flaticon-cook font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Food & Drink</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-chili">
<i class="glyph-icon flaticon-like font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Romance</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-carolina">
<i class="glyph-icon flaticon-doctor font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Health</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-punch">
<i class="glyph-icon flaticon-resume font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Biography</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-tangerine">
<i class="icon glyph-icon flaticon-jogging font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Sports</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-chili">
<i class="icon glyph-icon flaticon-baby-boy font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Children</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-chili">
<i class="glyph-icon flaticon-like font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Romance</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium pr-lg-5" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-chili">
<i class="icon glyph-icon flaticon-baby-boy font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Children</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<figure class="d-md-block mb-0 text-tangerine">
<i class="icon glyph-icon flaticon-jogging font-size-12"></i>
</figure>
<span class="tabtext font-size-3 font-weight-medium text-dark">Sports</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- End Category V3 -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Category #v4
Featured Categories
All Categories
<!-- Category V6 -->
<div class="container space-2">
<header class="mb-5 d-md-flex justify-content-between align-items-center">
<h2 class="font-size-7 mb-3 mb-md-0">Featured Categories</h2>
<a href="#" class="h-primary h-primary d-block">All Categories <i class="glyph-icon flaticon-next"></i></a>
</header>
<div class="row no-gutters row-cols-1 row-cols-lg-3 border-top border-left">
<div class="col">
<div class="position-relative">
<div class="border-bottom border-right p-4 p-lg-7">
<h6 class="font-size-3 mb-3 pb-1">Food & Drink</h6>
<ul class="list-unstyled mb-0">
<li class="font-weight-normal pb-1 mb-1">
<a class="link-black-100" href="#">Beverages</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">Celebrity Chefs</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">Cigars & Smoking</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">Cookery By Ingredient</a>
</li>
<li class="font-weight-normal pt-1 mt-1">
<a href="#" class="link-black-100">Cookery Dishes & Courses</a>
</li>
</ul>
<div class="d-flex d-md-block justify-content-end position-md-absolute bottom-0 right-md-30">
<span class="flaticon-cook text-tangerine__1 font-size-17"></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="position-relative">
<div class="border-bottom border-right p-4 p-lg-7">
<h6 class="font-size-3 mb-3 pb-1">Romance</h6>
<ul class="list-unstyled mb-0">
<li class="font-weight-normal pb-1 mb-1">
<a href="#" class="link-black-100">Adult & Contemporary Romance</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100"> Historical Romance</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">Home Nursing & Caring</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">Popular Medicine & Health</a>
</li>
<li class="font-weight-normal pt-1 mt-1">
<a href="#" class="link-black-100">Safety In The Home</a>
</li>
</ul>
<div class="d-flex d-md-block justify-content-end position-md-absolute bottom-0 right-md-30">
<span class="flaticon-like text-chili__1 font-size-17"></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="position-relative">
<div class="border-bottom border-right p-4 p-lg-7">
<h6 class="font-size-3 mb-3 pb-1">Health</h6>
<ul class="list-unstyled mb-0">
<li class="font-weight-normal pb-1 mb-1">
<a href="#" class="link-black-100">Advice On Parenting</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">Coping With Personal Problems</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">Family & Relationships</a>
</li>
<li class="font-weight-normal py-1 my-1">
<a href="#" class="link-black-100">
Fitness & Diet</a>
</li>
<li class="font-weight-normal pt-1 mt-1">
<a href="#" class="link-black-100">Giving Up Smoking
</a>
</li>
</ul>
<div class="d-flex d-md-block justify-content-end position-md-absolute bottom-0 right-md-30">
<span class="flaticon-doctor text-carolina__1 font-size-17"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Category V6 -->
Category #v5
Featured Categories
All Categories
<!-- Category V5 -->
<div class="container space-1">
<header class="d-md-flex justify-content-between align-items-center mb-6">
<h2 class="font-size-7 mb-4 mb-lg-0">Featured Categories</h2>
<a href="#" class="d-flex h-primary">All Categories<span class="flaticon-next font-size-3 ml-2"></span></a>
</header>
<ul class="nav justify-content-between flex-nowrap overflow-auto">
<li class="nav-item flex-shrink-0">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<div class="d-flex justify-content-center mb-3">
<div class="bg-indigo-light height-100 width-100 rounded-circle">
<figure class="d-flex justify-content-center mb-0 text-primary-indigo">
<i class="glyph-icon flaticon-gallery font-size-12 text-lh-2"></i>
</figure>
</div>
</div>
<span class="tabtext font-size-3 font-weight-medium text-dark">Arts & Photography</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<div class="d-flex justify-content-center mb-3">
<div class="bg-tangerine-light height-100 width-100 rounded-circle">
<figure class="d-flex justify-content-center mb-0 text-tangerine">
<i class="glyph-icon flaticon-cook font-size-12 text-lh-2"></i>
</figure>
</div>
</div>
<span class="tabtext font-size-3 font-weight-medium text-dark">Food & Drink</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<div class="d-flex justify-content-center mb-3">
<div class="bg-chili-light height-100 width-100 rounded-circle">
<figure class="d-flex justify-content-center mb-0 text-chili">
<i class="glyph-icon flaticon-like font-size-12 text-lh-2"></i>
</figure>
</div>
</div>
<span class="tabtext font-size-3 font-weight-medium text-dark">Romance</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<div class="d-flex justify-content-center mb-3">
<div class="bg-carolina-light height-100 width-100 rounded-circle">
<figure class="d-flex justify-content-center mb-0 text-carolina">
<i class="glyph-icon flaticon-doctor font-size-12 text-lh-2"></i>
</figure>
</div>
</div>
<span class="tabtext font-size-3 font-weight-medium text-dark">Health</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<div class="d-flex justify-content-center mb-3">
<div class="bg-punch-light height-100 width-100 rounded-circle">
<figure class="d-flex justify-content-center mb-0 text-punch">
<i class="glyph-icon flaticon-resume font-size-12 text-lh-2"></i>
</figure>
</div>
</div>
<span class="tabtext font-size-3 font-weight-medium text-dark">Biography</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<div class="d-flex justify-content-center mb-3">
<div class="bg-tangerine-light height-100 width-100 rounded-circle">
<figure class="d-flex justify-content-center mb-0 text-tangerine">
<i class="glyph-icon flaticon-jogging font-size-12 text-lh-2"></i>
</figure>
</div>
</div>
<span class="tabtext font-size-3 font-weight-medium text-dark">Sports</span>
</div>
</a>
</li>
<li class="nav-item flex-shrink-0">
<a class="nav-link font-weight-medium" href="#">
<div class="text-center">
<div class="d-flex justify-content-center mb-3">
<div class="bg-chili-light height-100 width-100 rounded-circle">
<figure class="d-flex justify-content-center mb-0 text-chili">
<i class="glyph-icon flaticon-baby-boy font-size-12 text-lh-2"></i>
</figure>
</div>
</div>
<span class="tabtext font-size-3 font-weight-medium text-dark">Children</span>
</div>
</a>
</li>
</ul>
</div>
<!-- End Category V5 -->