.container {
  width: 100%;
}

.container-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  margin: 4px 0 6px;
}

.mk-card-item {
  flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
  width: 142px;
  height: 126px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 8px;
  position: relative;

  .card-img {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* 渐变背景层 */
  .overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* 渐变层高度，可调 */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.001) 0%,
      rgba(0, 0, 0, 0.5) 100%
    );
    display: flex;
    align-items: flex-end; /* 文字贴近底部 */
    padding: 0 8px 6px; /* 内边距让文字与边缘保持距离 */
    box-sizing: border-box;
  }

  /* 渐变层上的文字 */
  .overlay-text {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    text-align: left;
    width: 100%;
  }
}