I'm trying to create a Flexbox gallery that is responsive to browser width (ie. wraps and auto creates rows) where you can click on the image to open up a full size version of the image on it's own page.
I've run it an issue where for some reason, the links are only working (including the pointer hover) on the images on the bottom row.
<div class="gallery-container"><a class="gallery-photo" href="1.png"><img src="1.png" alt=""></a><a class="gallery-photo" href="2.png"><img src="2.png" alt=""></a><a class="gallery-photo" href="3.png"><img src="3.png" alt=""></a><a class="gallery-photo" href="4.png"><img src="4.png" alt=""></a><a class="gallery-photo" href="5.png"><img src="5.png" alt=""></a><a class="gallery-photo" href="6.png"><img src="6.png" alt=""></a><a class="gallery-photo" href="7.png"><img src="7.png" alt=""></a></div>.gallery-container { display: flex; max-width: 90vw; width: 750px; flex-wrap: wrap; justify-content: space-evenly;}.gallery-photo { padding: 5px; height: 200px;}