How to add text to a hexagon without breaking the layout?

The problem with cut-and-paste code is that you don't have to understand it! I've found a great way to use CSS to create hexagons of images that I can then screenshot and submit as an official event photo.

My mockup is at https://codepen.io/itamer/pen/abYGLxV

It works beautifully UNTIL I try to add text to one of the hexagons.
All the IMG hexagons are ok
The empty DIV hexagon is ok
The DIV hexagon with text drops down



My...

How to add text to a hexagon without breaking the layout? WordPress ...