/* ===========================================
   index.html 专用样式
   =========================================== */

/* 主内容区域 */
.main-content {
  background: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 0;
}

/* 图片容器 */
.image-container {
  max-width: 100%; /* 移除固定宽度限制，允许在移动端占满屏幕 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-container a {
  display: block;
  width: 100%;
  cursor: pointer;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.image-container a:hover img {
  opacity: 0.9;
}

/* 响应式调整 */
@media only screen and (min-width: 601px) {
  .image-container {
    max-width: 100%; /* 占满父容器宽度 */
    padding: 0 10px; /* 仅保留极小的左右间距 */
    box-shadow: 0 0 20px rgba(0,0,0,0.1); /* 添加阴影增加层次感 */
  }
}

@media only screen and (min-width: 1024px) {
  .image-container {
    max-width: 1000px; /* 桌面端宽度调整 */
  }
}