.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    list-style: none;
    margin: 0;
}

.product-item {
    width: 23%; /* 确保每行展示四个产品，留出间距 */
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 20px; /* 产品之间的上下间距 */
    padding: 10px; /* 添加内边距让内容不紧贴边框 */
    background-color: #f4f4f4; /* 添加背景色 */
    border: 1px solid #ddd; /* 添加边框 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 增加悬停效果 */
}

.product-item:hover {
    transform: translateY(-5px); /* 悬停时上移 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}

.product-img {
    width: 100%; /* 图片宽度填满容器 */
    height: 180px; /* 统一图片高度 */
    object-fit: cover; /* 保持图片比例不变 */
    margin-bottom: 10px;
}

.product-title {
    font-size: 14px; /* 控制标题字体大小 */
    color: #333;
    height: 40px; /* 固定高度，避免标题过长导致产品高度不统一 */
    line-height: 1.4em; /* 保持文字的行高 */
    overflow: hidden; /* 隐藏超出部分的文字 */
    text-overflow: ellipsis; /* 使用省略号隐藏过长文字 */
    white-space: nowrap; /* 不换行 */
}

@media (max-width: 768px) {
    .product-item {
        width: 48%; /* 平板设备每行显示两个产品 */
    }
}

@media (max-width: 480px) {
    .product-item {
        width: 100%; /* 手机设备每行显示一个产品 */
    }
}



/*推荐文章*/

.article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 控制文章之间的横向和纵向间距，减少为10px */
    padding: 0;
    list-style: none;
}

.article-item {
    width: 48%; /* 每排展示两篇文章，每个占48%宽度 */
    box-sizing: border-box;
}

.article-item a {
    text-decoration: none;
    color: #333;
    font-size: 16px; /* 标题的字体大小 */
}

@media (max-width: 768px) {
    .article-item {
        width: 100%; /* 在平板和小屏设备上，每排显示一篇文章 */
    }
}