.card-product-wrapper{
    display: grid;
    width: 100%;
    /* height: 100vh; */
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}

.card-product { width: 100%; border-radius: 10px; background: #fff; border: 1px solid #eee; position: relative;}
.card-product .card-img{ width: 100%; height: 200px; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; position: relative; }
.card-product .card-img img{ cursor: pointer; width: 100%; height: 100%; object-fit: cover; }
.card-product .card-content { padding: 20px 10px; display: flex; flex-direction: column; justify-content: center; text-align: center; border-top: 1px solid #eee; position: relative; }
.card-product .category {  color:#fff; padding: 3px 3px; background: #000; position: absolute; top: 10px; left: 5px; font-size: 13px; border-radius: 2px; font-weight: 900; }
.card-product .title { font-size: 15px; color: #000; margin-bottom: 10px; cursor: pointer;}
.card-product .price { font-size: 15px; color: rgb(61, 219, 25) }
.card-product .btn-group { position: absolute; right: 20px; top: -25px; display: flex; gap: 10px; }
.card-product .btn-group span {padding: 10px; background: #ccc; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
.card-product .btn-group span:hover { filter: blur(2px); -webkit-filter: blur(1px); }
.card-product .btn-group .red { background: #a00d0d !important; color: #fff !important;}
.card-product .card-img .card-info {cursor: pointer;transition: all .3s; opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0000006b;}
.card-product .card-img .card-info span { cursor:pointer; transition: all .3s; font-size: 17px; color: #fff; opacity: .7; background: #ffffff6e; padding: 5px 15px; border-radius: 5px; }
.card-product .card-img:hover > .card-info { opacity: 1; }
.card-product .card-img .card-info span:hover { opacity: 1; color: #000; background: #fff;}

@media screen and (max-width: 900px) {
   .card-product-wrapper{ grid-template-columns: 1fr 1fr; padding: 0px; } 
}