.banner {
  position: relative;
  margin-bottom: -30px; /* 使后面的内容部分重合，改善视觉间距 */
  /* 渐隐效果 */
  --mask-height: 25%;
  mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-height)), transparent);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-height)), transparent);
}

.banner img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
  /* 保持图片比例并覆盖整个区域 */
  border-radius: 10px 10px 0 0;
}


/* 允许在中心叠加内容 */
.banner .overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  color: white;
  font-size: 1rem;
  font-family: var(--md-default-font);
  font-weight: bold;
  line-height: 1.4;
  text-shadow: var(--md-shadow-z2);
}

.banner .overlay-content img {
  max-width: 80%;
  max-height: 60%;
  object-fit: contain;
}