画像＋テキスト中央にして横並びにするときのリンク

上の図のような感じで画像＋下に説明　のようにしたいです。
①<figure>タグにリンクつけてもいいのかどうか。デザインとして例のようになればいいので<figure>じゃなくてもいいのですけど。
どういう選択が一番よいのかわかりません。

②画像にもテキストにもリンクをつけたいですけど、全部をくくってしまうと画像とテキストがずれてしまいます。

③　参考https://hemmi-ge.com/　のcodeを拾ってみました。同じような感じで少し変更して職場のCMSを利用してコードを入れていくと、タグすべてにリンク先をいれないといけないようになって同じリンク先にもかかわらず４箇所ほどリンク先を記入しないといけなくなってしまいました。
そのために以下のように変更しました。
開発ツールをつかいこなせたら問題ないのかもしれませんが…　それは難しくてできません…

html
1<h3>ああああああああああ</h3>
2<div class="flex-container">    
3    <figure>
4        <a href="#"><img src="120×120の画像" alt="">
5            <figcaption>いいいいいいいいいいいい</figcaption></a>
6    </figure>
7     <figure>
8        <a href="#"><img src="120×120の画像" alt="">
9            <figcaption>うううううううううううううう<br>えええええええええええ</figcaption></a>
10    </figure>
11    <figure>
12        <a href="#"><img src="120×120の画像" alt="">
13            <figcaption>おおおおおおおおおおおお<br>あああああああああああああああ</figcaption></a>
14    </figure>
15    
16</div>     
17    
18 <h3>ダウンロード</h3>
19<div class="flex-container">    
20    <figure>
21        <a href="#"><img src="120×120の画像" alt="文書ダウンロード">
22            <figcaption>文書ダウンロード</figcaption></a>
23    </figure>
24    
25</div> 
26

css
1 .flex-container {
2    display: -webkit-flex;
3    display:         flex;
4    -webkit-flex-wrap: wrap;
5            flex-wrap: wrap;
6    -webkit-justify-content: flex-start;
7            justify-content: flex-start;
8}
9.flex-container > figure {
10    text-align: center;
11}
12.flex-container > figure > img {
13    display: block;
14}
15    
16 .flex-container  figcaption{
17        
18        font-size: 14px;
19        font-weight: bold;
20    }
21    
22    .flex-container a{
23        text-decoration: none;
24        color: #000000;
25    } 
26        
27    }  
28
29@media screen and (max-width:500px){
30    .flex-container{
31        display: flex;
32        flex-wrap: wrap;
33        justify-content:　space-around;
34      
35     }
36   
37        }