/* 主容器：与 index.css 保持统一的宽度和居中 */
body #pages-container {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 50px;
    background: url(../images/i_head.jpg) no-repeat top center;
    background-size: 100% 20%;
    touch-action: pan-y;
    overflow-x: hidden;
}

/* 列表区域 */
body .banner {
    min-height: 29vh;
    height: auto;
    box-sizing: border-box;
}

body .pagetitle {
    height: 5vh;
    width: 100%;
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    text-align: center;
    line-height: 15vh;
    margin-bottom: 2rem;
}

/* 列表容器：增加上下间距，并为阴影预留空间 */
body .banner ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 94%;
    margin: 0 auto;
    list-style: none;
    row-gap: 0.5rem;          /* 上下间距加大（原gap的垂直部分） */
    column-gap: 0.2rem;       /* 左右间距保持不变 */
    padding-bottom: 15px;     /* 为底部阴影留出显示区域 */
    overflow: visible;
}

body .banner ul li {
    flex: 0 0 auto;
    width: calc(50% - 0.2rem);    /* 手机端两列 */
    background-color: transparent;
    border-bottom: 1px solid #f2f3f5;
    border-radius: 0.3rem;
    box-shadow: 2px 6px 10px #909090;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

body .banner ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.3rem;
    display: block;
}

/* 平板：一行三列 */
@media screen and (min-width: 768px) {
    body .banner ul li {
        width: calc(33.33% - 0.2rem);
    }
}

/* 桌面：一行四列 */
@media screen and (min-width: 1024px) {
    body .banner ul li {
        width: calc(25% - 0.2rem);
    }
    body .pagetitle {
        font-size: 0.8rem;
    }
}

/* 超大屏幕 */
@media screen and (min-width: 1400px) {
    body #pages-container {
        max-width: 960px;
    }
}