On the shop page, and in the ecommerce categories presented on the website, the products are presented in a grid. When the products names are so lengthy that they use two lines, the text (and it's semi-transparent background) covers the bottom of the product images. One can probably mitigate that effect by tweaking the height of the rows in the grid or someting like that.

How do I tweak this distance between the bottom of the images and the text in the built-in HTML/CSS editor?
The product images are all 1:1.