pics overlapping on handys in portrait at flex row wrap

[lagraf]

Hi to anyone,
I've a flexbox table with row wrap which shows model pics. Pics are separated by column-gap 15px. All runs good at desktop, tablet, handy in landscape. But on android handy in portrait each row 3 pics are overlapping instead of 2 pics side by side delimited by 15px. Can someone help and tell me what's the problem?

Simple test you can find here: www.visagemodels.at/neu/test.html?mgid=2

Regards, Franz

 

[lagraf]

The request was:
- flex-box row wrap with pics, max-width 200px
- reduce columns from 8 to 7, 6, 5, 4 when browser runs on smaller devices
- then reduce size of pics min-width 130px if browser is even narrower
- then reduce columns to 3 and 2 columns

I did it like the attached file and it does what it should.
Is this a good css or can I do something better?