Flexbox lightbox, help with css please.

Hi All, Help

I know I have done something wrong, but I cannot find what it is.

http://www.pziecina.com/lightbox/lightbox.html

I was creating a flexbox image gallery with a lightbox, for a possible demo in a future discussion. Which works, (sort of) but when I reduced the browser size to simulate smaller screens, (to work out the lightbox overlay, and positioning) I now have a large top margin after the initial text then after every 2nd image.

I can't work out if this is something to do with the flexbox css or my html code.

If you could take a look and offer a solution, (or even any suggestions) I would be grateful, it's probably something simple but after writing the css animation code I've gone code blind .