Help adding space/padding between related products on mobile

Hello! The items shown in related products at the bottom of my product listings are spaced out evenly on desktop, but on mobile they get squished together and start to overlap.

Any tips to add additional space between the related products? (the padding adjustments in site styles only seem to change the listing info and don't affect the related products section)

Images:
Left: desktop view of related products
Right (2 images): mobile view of related products (price text cut off)

Is there custom CSS added for desktop here? 

Which page are you showing in this image?

Thanks for your reply! I don't think I have any custom CSS that would affect this part of of the page (although I do have a couple custom fonts added, but it doesn't look like that's interfering).

It's one of my product pages, for example this one: https://www.emilykeatingsnyder.com/prints/print-pink-dust-cornflower

On 2/4/2023 at 1:59 AM, emilyks said:

Thanks for your reply! I don't think I have any custom CSS that would affect this part of of the page (although I do have a couple custom fonts added, but it doesn't look like that's interfering).

It's one of my product pages, for example this one: https://www.emilykeatingsnyder.com/prints/print-pink-dust-cornflower

Add to Home > Design > Custom CSS to fix problem

@media screen and (max-width:767px) {
.ProductItem-relatedProducts-grid .product-price {
    line-height: 30px !important;
}
}