Grid elements overlapping each other on smaller screens

Hi,

I have a grid 3x2 on the homepage with pictures + title in each grid. On a big screen it all looks good but when you are working on a smaller screen, the gap between the grid elements gets smaller and smaller until they eventually overlap each other on a really small screen desktop screen.

How to fix this problem? Like there is still a gap between the grid elements when you are working on a smaller screen.


This is how it looks on a bigger screen.

image
This is how it looks a smaller screen.

My website: https://preview.webflow.com/preview/fh-initial-project?utm_medium=preview_link&utm_source=designer&utm_content=fh-initial-project&preview=4aa6857d2b3677318d77710223dd453a&pageId=5f57eb0f35cfe27c920a65a5&mode=preview