Lowering the number of columns for tablet/mobile view (Elementor)

/* tablet : 2 columns */
@media (max-width: 768px){
.elementor-element.elementor-products-grid ul.products {
  grid-template-columns: repeat(2,1fr);
}

.elementor-element .elementor-wc-products .woocommerce[class*=columns-] ul.products li.product {
margin: 20px !important;
width:auto;
}

}

/* mobile : 1 column*/
@media (max-width: 360px){
.elementor-element.elementor-products-grid ul.products {
  grid-template-columns: repeat(1,1fr);
}