Responsive tiles

I’m trying to create tiles for categories on my blog. It works fine on desktop. I just created two sets of 2-columns in the section, put images as backgrounds and added text overlays as category names. However, it does not work smoothly on mobile devices. Images resize differently from each other and it looks a bit awful. The images all are the same size. However, I positioned them differently within a tile to show the part of the image I want to show.
Could anyone help me to figure out how to make it remain unified when the screen is resized?

The page I need help with: [log in to see the link]