How to make responsive links with images?

Question

css

In general, there is a section "Our services", in section 4 links with photos. For a long time I was tormented, it turned out through flex to persuade the browser to move the 4th link to the second row with the screen width I needed. Everything seems to be fine. But what about mobile devices? Let's say up to 500px these links still look normal, but after that they start to overlap each other (which is understandable, because I did not specify the width and height parameters in the media queries).
A question. Is it possible to somehow reduce the size of the block along with its content (and this is the background-image) by a percentage, so as not to resize everything that is inside?

Answer 1

I think you really need to read this:
htmlbook.ru/css/value/media
And see how the greats of this world make grids:
getbootstrap.com/docs/4.0/layout/grid