Custom CSS for Product Blocks within Product Page

Site URL: https://juliearbourdesign.com/carte-cadeau/bonne-idee-25

Bonjour!

So, I've read all posts referring to Product Blocks but still can't seem to find my answer.

I still have Squarespace 7.0 and Brine template. I've managed to put product blocks side by side in the mobile version of the Homepage but...can't find the proper code to do it for product blocks I've added in the Additional Information section of a Product page description.

I want to do it this way for multiple reasons :

-Image galleries doesn't display both Title and Description even though it displays side by side like I want on mobile version
-Summary blocks doesn't allow me to pick and choose my products
-Cross-related products with tags and categories only allow cross-relating products within same collection where I want to do throughout website.

Any idea on the right CSS coding so I can implement this for Product Blocks rows as in link provided?

Merci !

Add to Design > Custom CSS

@media screen and (max-width:640px) {
section.ProductItem-additional .span-2 {
    width: calc(~"50% - 20px") !important;
    float: left !important;
}}

Boom! Awesome @tuanphan. I had read all replies Ive seen from you in different posts and just couldn't figure that one out.

Many thanks!