.staggered-grid-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
}
  
/* 左侧渐变遮罩：白色 → 透明（从左到右渐变） */
.staggered-grid-container::before {
  content: "";        /* 伪元素必须的空内容 */
  position: absolute; /* 绝对定位到容器左侧 */
  left: 0;
  top: 0;
  height: 100%;       /* 高度和容器一致 */
  width: 80px;        /* 遮罩宽度 */
  /* 线性渐变：从白色（#fff）过渡到透明（transparent），方向「从左到右」 */
  background: linear-gradient(to right, #fff, transparent);
  pointer-events: none; /* 关键：遮罩不拦截鼠标事件（如点击、hover） */
  z-index: 10;        /* 确保遮罩在内容上方 */
}

/* 右侧渐变遮罩：白色 → 透明（从右到左渐变） */
.staggered-grid-container::after {
  content: "";
  position: absolute; /* 绝对定位到容器右侧 */
  right: 0;
  top: 0;
  height: 100%;
  width: 80px;        /* 遮罩宽度（和左侧保持一致） */
  /* 线性渐变：从白色（#fff）过渡到透明（transparent），方向「从右到左」 */
  background: linear-gradient(to left, #fff, transparent);
  pointer-events: none;
  z-index: 10;
}

.staggered-grid-row {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  height: 123px;
}

.staggered-grid-items {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  /* 确保动画流畅无卡顿 */
  backface-visibility: hidden;
  perspective: 1000px;
}

.staggered-grid-item {
  flex-shrink: 0;
  margin-right: 20px;
  height: 100%;
  display: flex;
  align-items: center;
}

.staggered-grid-item img {
  height: 100%;
  object-fit: contain;
}

/* 响应式适配：小屏暂停滚动，改为2列布局 */
@media (max-width: 800px) {
  .staggered-grid-row {
    height: 53px;
    /* margin-bottom: 12px; */
  }
  /* .staggered-grid-item {
    margin-right: 12px;
  } */

}