.media-card:hover .media-image img {
  transform: scale(1.05);
  transition: transform 0.5s ease;
  /* 新增：卡片整体过渡 */

}

/* banner样式 */
.media-banner {
  width: 100%;
  /* height: 480px; */
  position: relative;
}

.media-banner-img {
  width: 100%;
  height: 100%;
  left: 0;
  /* object-fit: cover; */
}



/* 确保动画元素初始状态不可见（配合wow.js） */
.wow {
  visibility: hidden;
}


.media-container {
  width: 100%;
  background: #FFFFFF;
}


/* 给卡片添加鼠标悬浮样式，提示可点击 */
.media-card {
  width: calc(33.33% - 0px);
  cursor: pointer;
  /* 鼠标悬浮显示手型 */
  transition: transform 0.3s ease;
  /* 添加点击反馈动画 */
  margin-bottom: 58px;
  box-sizing: border-box;
  padding: 0 17px;

}


.media-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 80px 0 58px 0;
  /* gap: 17px; */

  /* 核心：超出容器宽度时自动换行 */
}

.media-image {
  width: 100%;
  height: 221px;
  border-radius: 10px;
  overflow: hidden;
}

.media-image img {
  width: 100%;
  height: 100%;

}



.media-desc {
  width: 100%;
}

.media-desc-p1 {

  font-weight: 400;
  font-size: 16px;
  color: #74747F;
  margin-top: 32px;
}

.media-desc-p2 {

  font-weight: 400;
  font-size: 18px;
  color: #1B1C35;
  margin-top: 23px;
}

/* 1. 1200px ~ 1440px 范围（中等大屏幕） */
@media (max-width: 767px) {

  /* banner样式 */
  .media-banner {
    height: auto;
  }



  .media-image {
    width: 100%;
    height: calc((100vw - 48px) * 221 / 366);

  }
 
  .media-grid {
    display: block;
    gap: 0px;
    padding: 0;
    margin-top: 38px;
    /* 核心：超出容器宽度时自动换行 */
  }
 
  .media-desc-p1 {

    font-weight: 400;
    font-size: 15px;
    color: #74747F;
    margin-top: 26px;
  }

  .media-desc-p2 {

    font-weight: 400;
    font-size: 15px;
    color: #1B1C35;
    margin-top: 21px;
  }

  /* 给卡片添加鼠标悬浮样式，提示可点击 */
  .media-card {
    width: 100%;
    margin-bottom: 51px;
    padding: 0px;
  }
  .media-banner-img{
    object-fit: unset;
  }
}