I'm developing an e-commerce with WooCommerce and I use the following code to display 2 products per row when the user uses a mobile phone:

@media only screen and ( max-width: 980px ) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 47.5% !important;
margin-right: 2.5% !important;
}
.woocommerce-page ul.products li.product:nth-child(2n) {
margin-right: 0 !important;
}
}

In the Shop page it works very fine.

The problem is in Home, where the code does not work. Probably because the products are handled in a different way:

As you can see, Featured and Best Selling products are elements in the Home. I also used the inspector to retrieve the CSS class of those, but they are the same as in the addedd CSS (as ul.products).

I'm sure I'm missing something. Could you please suggest a way to solve this? Thanks!