html, body {
    overflow-x: hidden;
}

/* ========== 第一部分：三张响应式无缝图片 ========== */
.three-images-responsive {
    display: flex;
    flex-direction: row;           /* 默认水平排列 */
    width: 100vw;                  /* 突破父容器限制，全宽 */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;                 /* 根据幻灯片间距调整 */
    padding: 0;
}

.image-block {
    flex: 1;                       /* 每个块平均分配宽度 */
    line-height: 0;                /* 消除图片下方间隙 */
    overflow: hidden;              /* 可选，防止图片放大溢出 */
}

/* 图片之间无缝隙（电脑端水平无缝） */
.image-block:not(:last-child) {
    margin-right: 0;               /* 确保无右间距 */
}

.responsive-image {
    width: 100%;
    height: 834px;                 /* 固定高度，保证三张图片高度一致 */
    object-fit: cover;             /* 按比例裁剪，避免变形 */
    display: block;
}

/* 移动端：垂直排列 */
@media (max-width: 1200px) {
    .three-images-responsive {
        flex-direction: column;    /* 改为垂直排列 */
        margin-top: 0;             /* 可调整间距 */
    }

    .image-block:not(:last-child) {
        margin-right: 0;           /* 水平间距已无意义，确保垂直间距为0 */
        margin-bottom: 0;          /* 垂直方向无间距 */
    }

    .responsive-image {
        height: auto;              /* 移动端可根据需要调整高度，或保持固定 */
        /* 如果需要移动端也统一高度，可以改为 height: 400px; 并保持 object-fit: cover */
    }
}