.custom-swiper-container {
  width: 100%;
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
  /* 使用 aspect-ratio 來維持 2:1 的比例 */
  aspect-ratio: 2 / 1;
}

/* 如果不支援 aspect-ratio 的舊瀏覽器，使用固定高度作為備案 */
@supports not (aspect-ratio: 2 / 1) {
  .custom-swiper-container {
    height: 540px; /* 桌面版預設高度 */
  }

  /* 平板尺寸 (768px 以下) */
  @media (max-width: 768px) {
    .custom-swiper-container {
      height: 329px;
    }
  }

  /* 手機尺寸 (375px 以下) */
  @media (max-width: 375px) {
    .custom-swiper-container {
      height: 148px;
    }
  }
}

.custom-swiper-container .swiper-slide {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 確保圖片填滿容器且保持比例 */
  object-position: center; /* 圖片居中顯示 */
  border-radius: 0; /* 因為容器已經有 border-radius */
}

.custom-swiper-container .swiper-button-prev,
.custom-swiper-container .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 0px 1px 4.8px 0px #22222252;
}

.custom-swiper-container .swiper-button-prev:after,
.custom-swiper-container .swiper-button-next:after {
  font-size: 16px !important;
  color: #ff7b31;
}