.carousel {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
  justify-content: center; /* 確保圖片在內部容器中水平居中 */
}

.slide {
  display: none;
  min-width: calc(20% - 16px); /* 調整為20%減去空隙 */
  margin-right: 16px; /* 每張圖片右側的邊距 */
}

.slide img {
  width: 100%;
  height: 300px; /* 高度設置為300px，保持直立長方形 */
  object-fit: contain; /* 確保圖片完整顯示 */
}

.prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  cursor: pointer;
  font-size: 18px;
  left: 10px;
}

.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  cursor: pointer;
  font-size: 18px;
  right: 10px;
}

/* 默認情況下，顯示5張圖片 */
.carousel-inner .slide {
  display: block;
}

/* 手機模式：螢幕寬度小於768px時，只顯示1張圖片 */
@media (max-width: 768px) {
  .carousel-inner .slide {
      display: block;
      min-width: 100%; /* 使每張圖片在手機上佔滿100%的寬度 */
      margin-right: 0; /* 移除右邊距 */
  }

  /* 確保圖片在手機上居中顯示 */
  .carousel-inner {
      justify-content: center; /* 使容器內的圖片居中 */
  }

  /* 隱藏其他圖片，只顯示當前圖片 */
  .carousel-inner .slide:not(:first-child) {
      display: none;
  }
}