/* 全局样式重置，消除默认边距和盒模型问题 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面基础样式，匹配常规中文字体和颜色 */
body {
    font-family: "微软雅黑", "Microsoft Yahei", sans-serif;
    font-size: 14px;
    padding: 15px;
    /* 模拟页面整体内边距 */
    max-width: 800px;
    /* 适配原图的宽度范围 */
    margin: 0 auto;
    /* 居中显示 */
    background-color: #f6f6f6;

}

/* 主容器：网格布局，两列均分，设置模块间距 */
.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 23px 18px;
    /* 模块之间的间距，匹配原图视觉 */
}

/* 单个模块的容器 */
.module {
    width: 100%;
}

/* 模块头部：标题+更多+ 区域 */
.module-header {
    display: flex;
    justify-content: space-between;
    /* 标题左、更多右 */
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 6px;
    /* 底部浅分隔线 */
}

/* 模块标题样式：左侧红色竖线+内边距+加粗 */
.module-header .title {
    padding-left: 10px;
    font-weight: bold;
    font-size: 18px;
    color: #222;
    position: relative;
}

.module-header .title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
    width: 3px;
    height: 17px;
    background-color: #e53935;
}

/* 更多+ 样式：灰色小字 */
.module-header .more {
    font-size: 14px;
    color: #5d5d5d;
    cursor: pointer;
    /* 鼠标悬浮变手型，模拟可点击 */
}

/* 模块内容区：图片+文字 */
.module-content {
    width: 100%;
    height: 165px;
    border-radius: 5px;
    background-color: #fff;
}

/* 图片样式：宽度100%，保持比例，去除默认空隙 */
.module-content img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    /* 保持图片比例，适配容器 */
    display: block;
    border-radius: 5px 5px 0 0;
    /* 消除图片下方的默认空白 */
}

/* 文字描述样式：行高、上边距，匹配原图排版 */
.module-content p {
    margin-top: 8px;
    line-height: 1.3;
    font-size: 14px;
    color: #5d5d5d;
    padding: 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (min-width: 750px) {
    body{
        max-width: 100%;
    }
    .container{
        max-width: 1200px;
        margin: 0 auto;
    }

    .container{
        grid-template-columns: repeat(3, 1fr); 
    }

    .module-content img{
        height: 160px;
    }

    .module-content{
        height: auto;
        overflow: hidden;
    }

    .module-content p{
        margin: 16px 0;
    }

    .nav {
        height: 50px;
        background-color: #fdf5e8;
    }

    .yhm input.retrieval_button,
    .yhm input{
        box-sizing: content-box;
    }
    
}