/* 视频容器 - 确保居中并占满可用宽度 */
.video {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vw 0; /* 使用vw单位实现等比内边距 */
    box-sizing: border-box;
}

/* 视频区域内容容器 */
.xs {
    width: 80%;
    margin-bottom: 5.2vw; /* 等比底部间距 */
}

/* 文本内容容器 */
.cont {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: clamp(1rem, 2vw, 2rem); /* 字体等比缩放，同时限制最大最小 */
    box-sizing: border-box;
    padding: 3vw 5vw; /* 等比内边距 */
    gap: 1.5vw; /* 内部元素间距等比 */
}

/* 视频/图片等比缩放核心样式 */
.video img {
    width: 90%;
    height: auto;
    max-width: 100%;
    object-fit: contain; /* 保持图片比例，不拉伸 */
    border-radius: 0.8vw; /* 圆角等比 */
}

/* 移动端适配 - 强化小屏等比效果 */
@media (max-width: 768px) {
    .cont {
        font-size: 4vw; /* 小屏字体相对更大一些 */
        padding: 4vw 3vw;
    }
    
    .video {
        padding: 3vw 0;
    }
    
    .xs {
        width: 90%; /* 小屏宽度更大，提升利用率 */
        margin-bottom: 7vw;
    }
}

/* 超小屏适配 */
@media (max-width: 365px) {
    .cont {
        font-size: 5vw;
        gap: 2vw;
    }
    
    .video img {
        border-radius: 1.2vw; /* 小屏圆角相对更大 */
    }
    
    .xs {
        width: 95%;
        margin-bottom: 10vw;
    }
}