/* 图片墙Grid布局（优化整齐度） */
    .image-grid {
    
     grid-row:2;  grid-column: 1 / span 12;
  	border-radius:10px;  padding:12px; 
 	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    box-sizing: border-box;
    
      display: grid;
      /* 固定最小宽度，保证列数均匀，避免不规则空隙 */
   grid-template-columns: repeat(9, 1fr);
      /* 统一基础行高，让格子大小一致 */
      grid-auto-rows: 150px;
      grid-gap: 0.4rem;
      grid-auto-flow: dense; /* 自动填充空白，保持整齐 */
      
    }

    /* 语义化容器  */
    .image-item {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      /* 上浮动画更自然的缓动曲线 */
      transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                  box-shadow 0.4s ease;
      cursor: pointer;
    }

    /* 特殊尺寸布局（优化比例，保持整体整齐） */
    .image-item:nth-child(1) {
       grid-column: 1 / 4; grid-row: 1 / 3;
    }

    .image-item:nth-child(2) {
    grid-column:4 / 6; grid-row: 1;
    }

    .image-item:nth-child(3) {
      grid-column: 6 / 8; grid-row: 1;
    }

    .image-item:nth-child(4) {
      grid-column: 8 / 10; grid-row: 1;
    }
     .image-item:nth-child(5) {
      grid-column: 4 / 7; grid-row: 2;
    }

    .image-item:nth-child(6) {
      grid-column: 7 / 10; grid-row: 2;
    }

    /* 图片样式（优化裁剪，避免变形） */
    .image-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 图片暗化过渡更平缓 */
      transition: filter 0.5s ease;
    }

    /* 描述层（初始状态：底部显示标题） */
    .image-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
       line-height: 1.5rem;
      /* 初始背景色：深色半透明（不遮挡图片） */
      background-color: rgba(0, 0, 0, 0.7);
      /* 初始文字颜色：浅灰（柔和不刺眼） */
      color: #ddd;
      /* 初始标题对齐：居中（简洁美观） */
      text-align: center;
      /* 初始状态：只显示标题区域 */
      transform: translateY(calc(100% - 1.5rem));
      /* 所有属性过渡统一，避免突兀 */
      transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                  background-color 0.5s ease,
                  text-align 0.3s ease,
                  color 0.4s ease;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* 标题样式（初始状态） */
    .caption-title {
      font-size: 1.1rem; /* 初始字号适中 */
      font-weight: 600;
      margin-bottom: 0.5rem;
      opacity: 1;
      /* 标题自身过渡 */
      transition: font-size 0.4s ease;
      color:white;
    }

    /* 详细描述（初始隐藏） */
    .caption-desc {
      font-size: 1rem; /* 初始字号较小 */
      line-height: 1.5;
      opacity: 0;
      transform: translateY(15px);
      /* 延迟触发，与描述层上升衔接自然 */
      transition: opacity 0.4s ease 0.2s,
                  transform 0.4s ease 0.2s,
                  font-size 0.4s ease,
                  color 0.4s ease;
      flex: 1;
      display: flex;
      align-items: flex-start;
    }

    /* 悬停效果（核心修改：属性切换+自然过渡） */
    .image-item:hover {
    
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* 阴影加深，增强层次 */
    }

    .image-item:hover img {
      filter: brightness(0.6); /* 图片适度变暗，突出文字 */
    }

    /* 悬停时描述层变化 */
    .image-item:hover .image-caption {
      transform: translateY(0); /* 平稳上升到顶端 */
      background-color: rgba(83, 153, 238, 0.7); /* 悬停背景色：深靛蓝（更醒目） */
      text-align: left; /* 标题切换为左对齐（更易读） */
      color: #fff; /* 文字主色切换为纯白 */
       padding: 0.2rem 1rem 0 1rem;
    }

    /* 悬停时标题变化 */
    .image-item:hover .caption-title {
      font-size: 2rem; /* 标题字号增大 */
      font-weight: 500; /* 字重减轻，更柔和 */
     padding:1rem 0 0 0;
    }

    /* 悬停时详细描述显示 */
    .image-item:hover .caption-desc {
      opacity: 1;
      transform: translateY(0);
      font-size: 1.2rem; /* 描述字号增大 */
      color: #e0e7ff; /* 描述文字颜色：淡蓝（与标题区分层级） */
      padding-top:1rem;
    }
 
       
   @media only screen and (max-width:641px) {
 
 .image-grid {
 
      grid-auto-rows: 100px;
         grid-gap: 0.4rem;
    }
 .image-caption {
     
       line-height: 1rem;
      transform: translateY(calc(100% - 1rem));
     
    }
    .caption-title {
      font-size: 0.65rem; /* 初始字号较小 */
      line-height: 1.5;
      color:white;
  
    }
 .image-item:hover .image-caption {
    
       padding: 0.2rem;
    }

   /* 悬停时标题变化 */
    .image-item:hover .caption-title {
      font-size: 0.8rem;  
   
    
    }

    /* 悬停时详细描述显示 */
    .image-item:hover .caption-desc {
 
      font-size: 0.75rem;  
      line-height: 1rem;
    
    }
   }
    @media only screen and (max-width:365px) {

/* 悬停时详细描述显示 */
    .image-item:hover .caption-desc {
   
         font-size: 0.7rem; 
      line-height: 1rem;
    
    }

    }