Making divs with background images responsive

We’re using the Tempera theme and have a block of four divs in a 2×2 grid on the home page that are rollover background images with links. It looks great until it gets to a certain width, then they stack 1×4, which is what I want it to do on phones, but it’s doing it on laptops.

I would like to keep them in a 4×4 grid until it gets below 575 wide (the width of one cell) and just have them downsize until then, unless someone can show me a better way to do it.

https://agateridgevineyard.com/test/

Any ideas? Thanks!