main {
    width: 100vw;
    height: 90vh;
    color: #fff;
    display: flex;
    padding: 0 30px;
    justify-content: space-between;
    background-color: black;
}
.left {
    width: 27%;
}
.left-title {
    font-size: 35px;
    font-weight: bold;
    padding: 30px;
}
.left-img img {
    height: 70vh;
}
.right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 13vh 0;
    width: 70%;
}
.right p {
    font-size: 21px;
}
@media (max-width: 768px) {

    /* 覆盖主布局：竖排、自动高度 */
    main.page-main {
        margin-top: 6px;   /* 这里决定黑框离导航栏多远，可以改 50/70/80 试 */
        height: auto;       /* 不再死死固定 90vh，交给内容自己撑 */
        padding: 0 16px;    /* 左右窄一点，手机看更舒服 */
        flex-direction: column;
    }

    /* 用 left-img 的图片作为背景 */
    .left-img {
        width: 100%;
        height: 60vh;                 /* 你可以按需求调，例如 50vh、70vh */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* 隐藏 img 标签本身（背景已替代） */
    .left-img img {
        display: none;
    }

    /* 把背景图片设置进去 */
    .left-img {
        background-image: url("../images/Bio.jpg"); /* ← 把这里换成你的图片路径 */
    }

    /* 文字叠在图片上 */
    .right {
        width: 100%;
        padding: 20px 16px;
        background: rgba(0,0,0,0.45);  /* 半透明黑底，更易读，可调整 */
        margin-top: -40px;             /* 往上叠到图片区域内，数值可调 */
        backdrop-filter: blur(2px);    /* 可选，更高级质感 */
    }

    .right p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* 左边 block（标题 + 图片）手机合并到背景里 */
    .left {
        width: 100%;
    }

    .left-title {
        font-size: 28px;
        font-weight: bold;
        z-index: 10;
        color: white;
        padding: 0;
        margin: 0;
    }
}