One of three links not working despite having the exact same HTML and CSS code

Question

I've turned three identical images with identical HTML & CSS (apart from file names) into links but the first of three is not working. Any suggestions?

I'd like to add that I can click on the figcaption which does work on the first line, however for some reason all figcaptions have turned invisible when I added the links. I've also tried looking up how to fix this and the only thing I can find is adding z-index: 999; to css but that doesn't work either

.features {
    background: white;
    color: gray;
    padding: 50px;
    display: flex;
    flex-direction: row;
    font-family: tahoma;
}

.features figure {
    margin: auto;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
}

.features figure img {
    border: 1px solid white;
    border-radius: 50%;
    box-shadow: gray 0 0 10px;
    width: 170px;
    height: 170px;
}

    <section class="features">
    <figure>
        <img src="images/seed.jpeg" alt="Close up of a man planting a seed"><a href="whatwedo.html">
        <figcaption>What We Do</figcaption> 
    </figure>

    <figure>
        <img src="images/recycle.jpeg" alt="Smart phone with recycle image on screen on top of a reusable carrier bag"><a href="whatyoucando.html">
        <figcaption>What You Can Do</figcaption>
    </figure>

    <figure>
        <img src="images/volunteer.jpeg" alt="Man wearing a white shirt with volunteer printed on it"><a href="support.html">
        <figcaption>Support Us</figcaption>
    </figure>

  </section>

:/

Answer 1

Managed to figure it out, I'm so annoyed about how easy it was because I tried so many different things before finally trying this:

In the comments are what I had before, I just had to flip round the tags. yup, that simple. damn you html

<section class="features">
        <figure>
            <!-- <img src="images/seed.jpeg" alt="Close up of a man planting a seed"><a href="whatwedo.html"> -->
            <a href="whatwedo.html"><img src="images/seed.jpeg" alt="Close up of a man planting a seed">
            <figcaption>What We Do</figcaption> 
        </figure>

        <figure>
            <!-- <img src="images/recycle.jpeg" alt="Smart phone with recycle image on screen on top of a reusable carrier bag"><a href="whatyoucando.html"> -->
            <a href="whatyoucando.html"><img src="images/recycle.jpeg" alt="Smart phone with recycle image on screen on top of a reusable carrier bag">
            <figcaption>What You Can Do</figcaption>
        </figure>

        <figure>
            <!-- <img src="images/volunteer.jpeg" alt="Man wearing a white shirt with volunteer printed on it"><a href="support.html"> -->
            <a href="support.html"><img src="images/volunteer.jpeg" alt="Man wearing a white shirt with volunteer printed on it">
            <figcaption>Support Us</figcaption>
        </figure>
    </section>