Woocommerce shop and other pages displays 1 product per line in the mobile version, but I want to display 2 products per line, which CSS should I use to customize it for mobile only?

I tried below styles but not worked:

@media (max-width: 480px) {

	.wp-container-core-post-template-layout-1.wp-container-core-post-template-layout-1 {

	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

}

}

 Also tried below styles but not worked:

@media (max-width: 480px) {

    .woocommerce ul.products,

    .woocommerce-page ul.products,

    .woo_loop.grid_container {

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: space-between !important;

    }

    .woocommerce ul.products li.product,

    .woocommerce-page ul.products li.product,

    .woo_column,

    .woo_column_4,

    .col_item {

        width: 48% !important;

        margin-bottom: 15px !important;

    }

}