main {
    /* width: 100vw; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 120px;
    background-color: black;
}
.main-item {
    width: 45%;
}
.main-item-img img{
    width: 100%;
    height: 50vh;
}
.main-item-tltle {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
}
.about-title {
    margin-bottom: 10px; /* 控制标题与文字的距离 */
}

p {
    margin-top: 10px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.img-row {
    display: flex;
    flex-wrap: wrap;      /* 允许换行 */
    gap: 20px;            /* 图片之间空隙 */
    justify-content: flex-start; 
}

.img {
    width: calc((100% - 40px) / 3);  /* 一排三张图 */
}

.img img {
    width: 100%;   /* 让图片跟随 .img 缩放 */
    height: auto;
    display: block;
    object-fit: cover;
}
.main-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 标题保持白色，可 hover 变浅 */
.main-item-tltle {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
}

.main-item-tltle:hover {
    color: #ccc;
}

/* 图片 hover 轻微亮度变化（手感更好） */
.main-item-img img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.2s;
}

.main-item-img img:hover {
    opacity: 0.85;
}
@media (max-width: 768px) {

    main.page-main {
        margin-top: 6px;   /* 这里决定黑框离导航栏多远，可以改 50/70/80 试 */
        height: auto;       /* 不再死死固定 90vh，交给内容自己撑 */
        padding: 0 16px;    /* 左右窄一点，手机看更舒服 */
        flex-direction: column;
    }
    /* 每个作品改成一整行显示 */
    .main-item {
        width: 100%;
        margin-bottom: 24px;
    }

    /* 图片高度不要写死 50vh，改为自适应 */
    .main-item-img img {
        height: auto;
    }

    /* 如果后面有用到 .img-row 的多图布局，可以在手机上变成两列或一列 */
    .img-row {
        gap: 12px;
    }

    .img {
        width: 100%;  /* 或者想要两列就写：width: calc((100% - 12px) / 2); */
    }
}