画像のきれいな並べ方。

前提・実現したいこと

現在サイトを自作中です。
WordpressにHTMLを組み込む形で作っています。
均等に画像を2列に並べたい
文章だけではわかりづらいと思うので画像の参照をお願いします。

発生している問題・エラーメッセージ

画像が妙な余白を残して並べられます。

該当のソースコード

HTML
1補足情報の画像1枚目参照。
2<!-- サイト -->
3<div class="tab-wrap">
4    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked">
5　　<label class="tab-label" for="TAB-01">Sites</label>
6    <div class="tab-content">
7        <figure class="img-area" id="olu">
8　　        <a href="https://portfolio.abs-weblabo.jp/"　class="sites-img">
9　　　　        <img src="https://abs-weblabo.jp/wp-content/uploads/2021/02/portfolio.png" class="sites-img" id="olu" alt="">
10　　　      </a>
11        </figure>
12        <figure class="img-area" id="nora">
13            <a href="https://portfolio2.abs-weblabo.jp/" class="sites-img">
14                <img src="https://abs-weblabo.jp/wp-content/uploads/2021/02/portfolio2.png" alt="" id="nora" class="sites-img">
15           </a>
16　　    </figure>
17        <figure class="img-area" id="olu1">
18            <a href="https://portfolio1.abs-weblabo.jp/" class="sites-img">
19                  <img src="https://abs-weblabo.jp/wp-content/uploads/2021/05/portfolio1.png" class="sites-img" id="olu1" alt="">
20            </a>
21        </figure>
22            <a href="https://portfolio1.abs-weblabo.jp/">
23            </a>
24    </div>
25<!-- その他 -->
26    <input id="TAB-02" type="radio" name="TAB" class="tab-switch">
27　　<label class="tab-label" for="TAB-02">Others</label>
28    <div class="tab-content">
29       <figure>
30　　        <a href="https://portfolio.abs-weblabo.jp/">
31　　　　        <img src="https://abs-weblabo.jp/wp-content/uploads/2021/02/名刺2.png" class="others-img" alt="">
32　　　      </a>
33        </figure>
34　　    <figure>
35　　　      <a href="https://portfolio.abs-weblabo.jp/">
36　　　　        <img src="https://abs-weblabo.jp/wp-content/uploads/2021/02/名刺1.png" class="others-img" alt="">
37　　　      </a>
38        </figure>
39    </div>
40</div>

CSS
1補足情報の画像1枚目参照。
2/*ボタンタブのデザイン*/
3.tab-wrap {
4  display: flex;
5  flex-wrap: wrap;
6  margin:20px 0;
7}
8.tab-wrap:after {
9  content: '';
10  width: 100%;
11  height: 3px;
12  background: #0343A0;
13  display: block;
14  order: -1;
15}
16.tab-label {
17  color: White;
18  background: LightSkyblue;
19  font-weight: bold;
20  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
21  white-space: nowrap;
22  text-align: center;
23  padding: 10px .5em;
24  order: -1;
25  position: relative;
26  z-index: 1;
27  cursor: pointer;
28  border-radius: 5px 5px 0 0;
29  flex: 2;
30}
31.tab-label:not(:last-of-type) {
32  margin-right: 5px;
33}
34.sites-img{
35	/*width:65%;*/
36	height:auto;
37}
38.others-img{
39	/*width:65%;*/
40	height:auto;
41}
42.img-area{
43	vertical-align: bottom;
44}
45/* アクティブなタブ */
46.tab-content{
47	height: 0;
48  overflow: hidden;
49  opacity: 1;
50	display: grid;
51	gap:20px;
52	grid-template-columns: 1fr 1fr;
53}
54.tab-switch:checked+.tab-label {
55  background: #0343A0;
56}
57.tab-switch:checked+.tab-label+.tab-content {
58  height: auto;
59  overflow: auto;
60  opacity: 1;
61  transition: 1.0s opacity;
62  box-shadow: 0 0 3px rgba(0,0,0,.2);
63}