:root {
    /* 定义 CSS 变量 */
    --carousel-width: 600px;
    --card-width: 60%; /* 卡片宽度占轮播图总宽度的百分比 */
    --card-spacing: 20%; /* 相邻卡片之间的间距（相对总宽度） */
    --scale-factor: 1.2; /* 居中卡片的放大比例 */
}

.carousel-container {
    max-width: var(--carousel-width);
    aspect-ratio: 600 / 586;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* 增加一个 Flexbox 容器来居中内容，简化定位 */
    display: flex;
    justify-content: center;
}

#banner {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

#banner li {
    position: absolute;
    /* 所有的卡片都居中对齐，然后通过 left/right 偏移 */
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    transition: all 0.5s ease;
    width: var(--card-width);
}

#banner li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* 导航按钮和圆点 */
/* 保持不变 */