Custom CSS for two in a row product blocks on mobile

Site URL: https://www.pappishop.com/

Hello, I hope that you are well! I decided to put two product blocks towards the bottom of my websites homepage. On desktop view, the product blocks are side by side (two in a row). However, on mobile view, the images grow in size and stack instead of keeping the format two in a row. Is there a custom CSS to make two product blocks side by side (two in a row) on mobile view?

For reference, here are the product blocks I am talking about (desktop version):

Add to Design > Custom CSS

/* Products homepage 2 columns mobile */
@media screen and (max-width:767px) {
div#page-section-60342ca29698617c1459cb53 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS

/* Products homepage 2 columns mobile */
@media screen and (max-width:767px) {
div#page-section-60342ca29698617c1459cb53 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

This worked perfectly! Thank you so much!!