线性渐变无法完整覆盖卡片背景的问题求助

大家好，我最近碰到个头疼的问题：有些卡片底部的线性渐变没能完全覆盖背景图，导致底部出现一条很违和的亮线，但奇怪的是这个问题并不是所有卡片都会出现。我已经在多款浏览器中测试过，这个现象依然存在。

我的代码结构如下：

HTML 代码 #

<a href="/artists">
  <div class="card">
  </div>
</a>

CSS 代码 #

.card {
  /* Set banner as card background */
  background-image:
  linear-gradient(rgba(0, 0, 0, 50%),
  rgba(0, 0, 0, 80%)),
  url(https://cdna.artstation.com/p/assets/images/images/060/211/960/large/citemer-liu-shenhexiao.jpg);
  /* Make banner fill card */
  background-size: cover;
  /* Set card aspect ratio */
  aspect-ratio: 3.5/ 1;
  /* Set card size */
  width: 600px;
  /* Center cropped banner*/
  background-position: center;
  /* Round card corners */
  border-radius: 15px;
  /* Add shadow behind card */
  /*box-shadow: 0 0 10px var(--color-card-banner-shadow);*/
}

.card:hover {
  /* box-shadow: 0 0 10px var(--color-card-banner-shadow-hover); */
}

有没有大佬能帮我看看这是怎么回事，该怎么解决这个问题呀？

备注：内容来源于stack exchange，提问作者Sidney