/**
 * 一行四图 PRO（移动版）图片显示优化
 * 解决移动端图片裁剪问题，让图片完整显示
 */

/* 移动端图片完整显示样式 */
@media (max-width: 768px) {
  /* 一行四图 PRO 模块的图片优化 */
  .module-image-402 .image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain !important;
    max-height: 200px; /* 限制最大高度，避免图片过高 */
  }
  
  /* 如果需要固定高度的容器，可以使用以下样式 */
  .module-image-402 .image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa; /* 添加背景色，避免留白太明显 */
    min-height: 150px;
  }
  
  /* 针对不同位置的图片单独调整 */
  .module-image-402 .image-402-1 .image-wrap {
    min-height: 300px; /* 左侧大图高度 */
  }
  
  .module-image-402 .image-402-1 .image-wrap img {
    max-height: 300px;
  }
  
  .module-image-402 .image-402-2 .image-wrap,
  .module-image-402 .image-402-3 .image-wrap {
    min-height: 145px; /* 右侧小图高度 */
  }
  
  .module-image-402 .image-402-2 .image-wrap img,
  .module-image-402 .image-402-3 .image-wrap img {
    max-height: 145px;
  }
  
  .module-image-402 .image-402-4 .image-wrap {
    min-height: 300px; /* 右侧大图高度 */
  }
  
  .module-image-402 .image-402-4 .image-wrap img {
    max-height: 300px;
  }
}

/* 通用的一行四图模块优化 */
@media (max-width: 768px) {
  /* image401 模块 */
  .module-image-plus img,
  .module-image-plus-top img,
  .module-image-plus-bottom img {
    object-fit: contain !important;
    width: 100%;
    height: auto;
  }
  
  /* 保持图片比例 */
  .module-image-plus .image-wrap,
  .module-image-plus-top .image-wrap,
  .module-image-plus-bottom .image-wrap {
    overflow: visible !important;
  }
}