Product card size on tablet

the display of cards on the tablet is not optimal.

https://imgur.com/a/pYBkFWF

i’ve tried with

@media(max-width: 1200px){
.archive .product {
    width: 100% !important;
}
}

or

@media only screen and (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
       width:  70%;
   }
}