/* 主要画廊容器 */
.gallery-container {
  max-width: 1200px;
  margin: 4rem auto; /* 上下留白 */
  padding: 0 1rem; /* 左右内边距 */
  background-color: #1a1a1a; /* 确保背景色一致 */
  min-height: 600px; /* 设置最小高度 */
}

/* 画廊网格布局 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式列宽 */
  gap: 1.5rem; /* 图片间距 */
  margin-top: 1rem; /* 可选：给容器顶部一点空间 */
}

/* 画廊项目 */
.gallery-item {
  overflow: hidden; /* 隐藏超出部分 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 阴影效果 */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

/* 悬停效果 */
.gallery-item:hover {
  transform: scale(1.03); /* 悬停时轻微放大 */
}

/* 图片样式 */
.gallery-item img {
  width: 100%; /* 宽度占满父容器 */
  height: 200px; /* 固定高度 */
  object-fit: cover; /* 保持比例并填充 */
  display: block; /* 移除底部可能的空隙 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr; /* 在小屏幕上变为单列 */
    gap: 1rem; /* 减小间距 */
  }
}