ki-main {
  width: min(1200px, 90vw);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.ki-slider-content{
  flex: 1;
  min-width: 300px;
}
.ki-sliders-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-width: 350px;
  flex-wrap: nowrap;
  height: 700px;
}
.ki-slider {
  width: calc(50% - 10px); /* 计算每个滑块的宽度，减去间距的一半 */
  min-width: 150px; /* 设置最小宽度，确保在小屏幕上也能显示 */
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 10% 90%,
    transparent
  );
}
.ki-slider .list {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(var(--height) * var(--quantity));
  position: relative;
}
.ki-slider .list .item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  top: 100%;
  animation: autoRun 16s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc(
    (16s / var(--quantity)) * (var(--position) - 1) - 16s
  ) !important;
}
.ki-slider .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
@keyframes autoRun {
  from {
    top: 100%;
  }
  to {
    top: calc(var(--height) * -1);
  }
}
.ki-slider:hover .item {
  animation-play-state: paused !important;
  filter: grayscale(1);
}
.ki-slider .item:hover {
  filter: grayscale(0);
}
.ki-slider[reverse="true"] .item {
  animation: reversePlay 16s linear infinite;
}
@keyframes reversePlay {
  from {
    top: calc(var(--height) * -1);
  }
  to {
    top: 100%;
  }
}
@media (max-width: 900px) {
  ki-main {
    height: auto;
    padding: 50px 0;
  }
  .ki-slider-content {
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }
  .ki-sliders-container {
    width: 100%;
  }
  .ki-slider {
    width: calc(50% - 10px);
    min-width: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .ki-sliders-container {
    height: 700px;
}}

/* 添加额外的媒体查询，确保在极窄屏幕上也能并列显示 */
@media (max-width: 400px) {
  .ki-sliders-container {
    gap: 10px;
  }
  .ki-slider {
    width: calc(50% - 5px);
    min-width: 120px;
  }
}