liタグの中に、aタグを入れると、画像サイズが壊れてしまいます。

下記コードをブラウザで表示した場合、liタグ内のimgのサイズがおかしくなりました。
該当箇所は一番最初のliタグです。
元々aタグのつけ忘れがあったので一番最初以外まだつけていませんが、今回の症状を確認したのでまだ全てつけていません。
具体的には高さが小さくなってしまうという症状が出ます。

cssでflexの横並びを行っていますが、それが原因でしょうか。

<section class="newarrival">
	<h2>NEW ARRIVAL</h2>
	
	<ul class="arrival-item-list">
		
		<li class="list-item">
			<a href="#" class="item-link">
				<img src="images/dairku6.jpg" alt="product1">
			</a>
		</li>
		
		
		<li class="list-item">
			<img src="images/neousign.jpg" alt="product2">
		</li>
		
		<li class="list-item">
			<img src="images/auraree_denim.jpg" alt="product3">
		</li>
		
		<li class="list-item">
			<img src="images/e382b9e382afe383aae383bce383b3e382b7e383a7e38383e38388-2020-06-06-190714.png" alt="product4">
		</li>
		
		<li class="list-item">
			<img src="images/neonsign1.png" alt="product5">
		</li>
		
		<li class="list-item">
			<img src="images/neonsign2.png" alt="product6">
		</li>
		
		<li class="list-item">
			<img src="images/neonsign3.png" alt="product7">
		</li>
		
		<li class="list-item">
			<img src="images/paccbet1.png" alt="product8">
		</li>
	</ul>
	
	<a href="#"><p class="more">MORE</p></a>
</section>	
	
コード

.newarrival{
	margin: 80px 0 80px;
	background-color: #fff;
}
.arrival-item-list{
	display: flex;
	width: 70%;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0 auto;
	background-color: #ffffff;
}
.list-item{
	width: 21%;
	margin-bottom: 24px;
}
.item-link{
    width: 100%;
}
.list-item>img{
    width: 100%;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
}
/*/newarrival*/
コード