* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 核心：瀑布流容器改为列表容器 */
.grid {
  width: 100%;
  max-width: 1200px; /* 最大宽度，可根据需求调整 */
  margin: 0 auto; /* 居中 */
  padding: 15px 20px 0 0;
  /* 去掉瀑布流相关样式（如column-count/column-gap） */
  column-count: unset;
  column-gap: unset;
}

/* 列表项：默认左图右文（Flex布局） */
.grid-item {
  display: flex;
  background: #fff;
  align-items: center;
  width: 100%;
  margin-bottom: 15px; /* 列表项间距 */
  padding: 0px; 
  gap: 0px; /* 图片和标题的间距 */
}

/* 16:9比例图片容器（核心） */
.item-img {
  position: relative;
  width: 30%; /* 图片默认宽度，可调整 */
  padding-top: 16.875%; /* 16:9比例 = 9/16=56.25% → 30% * 56.25% = 16.875% */
  flex-shrink: 0; /* 防止图片被挤压 */
  overflow: hidden;
}

/* 图片自适应填充容器 */
.item-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

/* 标题容器 */
.item-title {
  flex: 1; /* 标题占剩余宽度 */
  padding:15px;
}

.item-title h3 {
  font-size: 16px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 媒体查询：小屏幕（768px以下）自适应 */
@media (max-width: 768px) {
	.grid {
		padding: 15px 0px 0 0;
	}
  .grid-item {
    flex-direction: column; /* 转为上图下文 */
    align-items: flex-start;
  }

  .item-img {
    width: 100%; /* 图片占满宽度 */
    padding-top: 56.25%; /* 16:9比例（9/16=56.25%） */
  }

  .item-title h3 {
    white-space: normal; /* 小屏标题可换行 */
    font-size: 14px;
  }
}