/*实现左右横向轮播图*/
#image-carousel {  
  display: flex;
  flex-direction: row;
  overflow-x: hidden;  
  scroll-snap-type: x mandatory;  
  scroll-behavior: smooth;  
  white-space: nowrap;  
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}  

.carousel-image {  
  flex: 0 0 auto;  
  width: 500px;  
  height: 300px;  
  scroll-snap-align: start;  
  object-fit: cover;
}  

.carousel-image.active {  
  scroll-snap-align: center;  
}

/* 响应式设计 */
@media (max-width: 1080px) {
  #image-carousel {
    max-width: 95%;
  }
  
  .carousel-image {
    width: 400px;
    height: 250px;
  }
}

@media (max-width: 768px) {
  #image-carousel {
    max-width: 100%;
    padding: 0 10px;
  }
  
  .carousel-image {
    width: 300px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  #image-carousel {
    padding: 0 5px;
  }
  
  .carousel-image {
    width: 250px;
    height: 150px;
  }
}