Html – Only bottom row of Flexbox Gallery in clickable

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;
}

I have a live test link that show the error/issue: https://nickvn33.github.io/Yoshin_testbed/Gallery.html

You’ll also notice if you hide the photo on the bottom line, photos 4-6 become clickable