.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    grid-template-rows: auto 1fr auto; /* 三行，第一行和第三行根据内容自适应高度，第二行占据剩余空间 */
    gap: 1rem; /* 格子之间的间隙 */
    padding: 1rem; /* 内边距 */
    box-sizing: border-box;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* 容器宽度设为100%，以适应父元素的宽度 */
  }
  
  .image-wrapper {
    display: flex; /* 添加flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: auto;
  }

  .image-wrapper img {
    width: auto; /* 维持宽高比 */
    max-height: 100px; /* 限制图片的最大高度，根据需要调整 */
    object-fit: cover; /* 图片填充整个包装器 */
    height: auto; /* 添加高度自动，保持图片原始宽高比 */
  }

  .image-wrapper1 {
    display: flex; /* 添加flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 100%;
    margin-top: -15%;
  }

  .image-wrapper1 img {
    max-height: 250px; /* 限制图片的最大高度，根据需要调整 */
    object-fit: cover; /* 图片填充整个包装器 */
    height: auto; /* 添加高度自动，保持图片原始宽高比 */
  }

  .image-wrapper2 {
    display: flex; /* 添加flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    flex-direction: column; /* 排列方向改为垂直 */
    width: 100%;
  }
  .hidden-input {
    visibility: hidden;
  }
  .image-wrapper21 {
    display: flex; /* 添加flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 100%;
  }
  .input-above-buttons {
    width: 150px;
    height: 30px;
    margin-bottom: 1%;
  }
  
  #icon2{
    margin-left: 2%;
  }
  #icon1{
    margin-right: 2%;
  }
  
  .image-wrapper2 img {
    max-height: 50px; /* 限制图片的最大高度，根据需要调整 */
    object-fit: cover; /* 图片填充整个包装器 */
    height: auto; /* 添加高度自动，保持图片原始宽高比 */
    box-shadow: 0 4px 8px rgba(189, 2, 2, 0.3); /* 添加阴影效果 */
    transition: box-shadow 0.3s; /* 阴影变化的过渡效果 */
    border-radius: 10px; /* 根据需要调整这个值来设置圆角的大小 */
  }
  .button {
    cursor: pointer;
    display: inline-block; /* 使得图片并排显示 */
  }

  .hidden {
      display: none; /* 初始状态下隐藏图片 */
  }

  #action-buttons {
    grid-column: 1 / -1; /* 按钮跨越所有列 */
    grid-row: 3; /* 按钮在第三行 */
    z-index: 3; /* 确保它在最上层 */
    justify-self: center; /* 水平居中 */
    align-self: start; /* 从行的顶部开始对齐 */
  }

  .image-wrapper3 {
    display: flex; /* 添加flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 100%;
  }

  .image-wrapper3 img {
    object-fit: cover; /* 图片填充整个包装器 */
    height: 18px; /* 限制图片的最大高度，根据需要调整 */
  }

  .text-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem; /* 根据需要调整字体大小 */
    width: 100%;
    text-align: center; /* 确保文本在其容器内居中 */
    color:gray;
  }

  .text-wrapper text{
    grid-column: 1 / -1; /* 跨越所有列 */
    /* 适当的网格行位置，取决于它应该位于网格的哪一行 */
    /* 如果它应该是最后一个元素，可以是 */
    grid-row: 4; /* 或者其他合适的行号 */
    margin-top: 1%;
  }

  #img-large {
    grid-column: 1 / -1; /* 大图片跨越所有列 */
    grid-row: 2 / 3; /* 大图片在第二行 */
    z-index: 2; /* 确保它在中间 */
    justify-self: center; /* 水平居中 */
  }

#loading {
    display: none;
    /* 设置loading效果的样式，这里只是一个简单的示例
    background: #fff;
    opacity: 0.8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;*/
}
#loading img {
    /* 设置图片的旋转动画 */
    animation: rotate 1s infinite linear;
}
@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}
/* 响应式设计 */
/* 当屏幕宽度小于375px时 */
@media screen and (max-width: 375px) {
    .container {
        gap: 0.25rem; /* 更小的间隙 */
        padding: 0.25rem; /* 更小的内边距 */
    }
    .image-wrapper img, .image-wrapper1 img, .image-wrapper2 img {
        max-height: 30px; /* 进一步调整图片最大高度 */
    }
    .image-wrapper1 img {
        max-height: 150px; /* 进一步调整图片最大高度 */
    }
  }