/* =========================
           Responsive
   ========================= */
.section--carousel {
/* padding: 0; */

}
.carousel {
    /* margin-bottom: 2rem; */
}
.carousel__container {

    width: 100%;

    overflow: hidden;
    margin: 0;
    padding: 0;
}
.carousel__wrapper {
        margin: 0;
    padding: 0;
}
.carousel__slide {

}
.carousel__image,
.carousel__image img {
    width: 100%;
    height: auto;
       aspect-ratio: 3 / 4; 
    object-fit: cover;
    display: block;
}

/* =========================
           控制按钮
   ========================= */

.carousel-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    z-index: 2;
}

.carousel-controls__button {
     flex: 0 0 auto;
    background: transparent;
    color: var(--background-color);
    border: none;
    padding: 10px 0;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
  line-height: 1;
}
.carousel-controls__dots {
flex: 1 1 auto;                    /* 原来是 1 1 auto，会被拉伸 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;                 /* 需要换行可改为 wrap */
}
.carousel-controls__dots .dot {
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box; padding:0; margin:0; border:0; background:transparent;
  position:relative; display:inline-block; vertical-align:middle;
                width: 44px;
  height: 44px;
  

}.carousel-controls__dots .dot::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: color-mix(in srgb, var(--background-color) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--background-color) 70%, transparent);
  opacity:.7;
  transition: transform var(--transition-duration,.3s) var(--animation-curve,ease),
              opacity var(--transition-duration,.3s) var(--animation-curve,ease);
}
.carousel-controls__dots .dot.is-active::before{
  background: var(--background-color);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}
.carousel-controls__dots .dot:focus-visible{
  outline: 2px solid var(--brand-red-color);
  outline-offset: 2px;
}
.carousel-controls__button {
display: none;
}
/* =========================
           进度条
   ========================= */


/* =========================
           断点768px
   ========================= */

@media (min-width: 768px) {
.carousel__image,
.carousel__image img {
    aspect-ratio: 4 / 4;
}

}
/* =========================
           断点1024px
   ========================= */

@media (min-width: 1024px) {

    .carousel__container {
        height: 100vh; 
         height: 100dvh;
    }

    .carousel__image,
.carousel__image img {
        height: 100%;          
        aspect-ratio: unset; 
    }
/* .carousel-controls {
    width: 60vw;
    bottom: 40px;
}
.carousel-controls__button {
display: block;
} */
 /* =========================
           暂时隐藏
   ========================= */
 .carousel-controls {
display: none;
} 
}