.pics-container {
    width: 100%;
    max-width: 1200px; /* 调整最大宽度以适应更多内容 */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.pics-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 保持图片之间的间距 */
}

.pics-item {
    flex: 0 0 calc(33% - 20px); /* 每行显示四个图片，减去间距 */
    box-sizing: border-box;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.3s;
    cursor: pointer; /* 添加鼠标悬停时的链接效果 */
    display: flex;
    flex-direction: column; /* 垂直排列图片和描述 */
    align-items: center; /* 垂直居中对齐内容 */
    height: 100%; /* 确保容器有高度 */
}

.pics-item:hover {
    transform: scale(1.05);
}
.pics-content {
    flex-grow: 1; /* 让内容部分占据剩余空间 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 居中图片，避免拉伸 */
    justify-content: center;
}
.pics-img {
    display: block;
    max-width: 110%;
    height: auto; /* 按原始比例渲染，避免被强制拉伸 */
    max-height: 400px; /* 控制最大高度，避免过度放大 */
    cursor: pointer;
    transition: transform 0.3s;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* 提升缩放清晰度（Chrome） */
    image-rendering: crisp-edges; /* 某些浏览器对线条/文字更清晰 */
}

.pics-description {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: #333;
    margin: 0; /* 移除所有外边距 */
    width: 100%; /* 确保描述占满宽度 */
}

.pics-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}

.pics-preview img {
    max-width: 90%;
    max-height: 90%;
    cursor: zoom-out; /* 添加关闭预览的鼠标样式 */
}

.pics-preview.show {
    visibility: visible;
    opacity: 1;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .pics-item {
        flex: 0 0 calc(33.333% - 20px); /* 减少每行显示的图片数量 */
    }
}

@media (max-width: 992px) {
    .pics-item {
        flex: 0 0 calc(50% - 20px); /* 进一步减少每行显示的图片数量 */
    }
}

@media (max-width: 768px) {
    .pics-item {
        flex: 0 0 calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .pics-item {
        flex: 0 0 100%; /* 在小屏幕上占满宽度 */
    }
}