.cards-wrapper {
    /* 让容器占据整个视口高度，并允许滚动 */
    min-height: 100vh; 
    display: flex;
    flex-direction: column; /* 纵向排列卡片 */
    align-items: center;
    justify-content: center; /* 可选：垂直居中卡片 */
    gap: 1rem; /* 卡片之间的间距 */
    padding: 2rem; /* 容器内边距 */
}

.card-container {
    width: calc(100vw - 6rem); /*  保持宽度 */
    height: auto;
    margin: 0 auto; /*  居中对齐 */
}

.card {

    height: 50vh; /* 保持高度为视口高度的50% */
    width: 33.990vh; /* 保持宽度为视口宽度减去2rem */
    display: flex; /* 使用flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    /* border-radius: 1rem; */
    margin: 0 auto;
    perspective: 1000px;
    overflow: hidden;
  }
  
  .front, .back {
    position: absolute; /* 保持绝对定位 */
    width: 100%; /*  宽度设置为父元素的100% */
    height: 100%; /* 高度设置为父元素的100% */
    backface-visibility: hidden;
    transition: transform 0.3s ease-in-out;
    display: flex; /*  使用flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    /* background-color: #eee; */
    background-size: cover;
    background-position: center; /* 确保背景图片在中心显示 */
  }
  

.front {
    background-image: url(/img/BO-KZ.png);
}

.back {
    
    transform: rotateY(180deg);
}