.section--news {
    background-image: var(--bg-mobile, var(--bg-tablet, var(--bg-desktop)));
    /* background-position-y: calc(0px - 200vh); */
  color: var(--brand-black-color);
  background-color: var(--brand-grey-color);
}

.section--news h1,
.section--news h2,
.section--news h3,
.section--news p,
.section--news a {
  color: var(--brand-black-color);
}
.wrap--news {
    grid-template-areas: "title" "news" "discovery";
    padding: 20px 20px clamp(200px, 25vw, 250px) 20px;
}

.news-grid {
    grid-area: news;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* padding: 0 10px; */
    justify-content: center;
        align-items: start;
}

.wrap--news .home-discovery {
    grid-area: discovery;
justify-self: start; 
}

.deco-item-left--news {
left: 0;
bottom: 0;
  width: 35%;
  opacity: 1;
}



/* --- 桌面端布局 --- */
@media (min-width: 768px) {
    .section--news {
    background-image: var(--bg-tablet, var(--bg-desktop));
    /* background-position-y: calc(0px - 200vh); */
}
    /* 在平板及以上尺寸设备上应用这些样式 */
 .news-card {
        width: auto; /* 在大屏幕上，让 flex-basis 控制宽度，而不是固定的 width */
    }
    /* 默认情况 (3个活动) */
    .news-grid.item-count-3 .news-card {
        /* flex-basis: calc(33.333% - 14px); */
         flex-basis: calc(50% - 10px); /* 10px是gap(20px)的一半 */
        /* 3列布局，减去gap的影响 */
        /* 计算: (100% / 3) - (gap * 2 / 3) -> 33.33% - (20px * 2 / 3) ≈ 14px */
    }
      .news-grid.item-count-3 .news-card:first-child {
        /* 单独为第一个卡片设置，覆盖上面的样式 */
        flex-basis: 90%; /* 让第一个卡片占据100%宽度，撑满第一行 */
        /* width: 90%; */
    }

    /* 当只有2个活动时 */
    .news-grid.item-count-2 {
        justify-content: center;
        /* 居中两个卡片 */
    }

    .news-grid.item-count-2 .news-card {
        flex-basis: calc(50% - 10px);
        /* 2列布局 */
        max-width: 400px;
        /* 可以设置一个最大宽度，防止卡片过大 */
    }

    /* 当只有1个活动时 */
    .news-grid.item-count-2 {
        justify-content: center;
        /* 居中单个卡片 */
    }

    .news-grid.item-count-1 .news-card {
        flex-basis: 100%;
        /* 占满整行 */
        max-width: 500px;
        /* 关键：设置一个合理的最大宽度，防止它撑满整个屏幕 */
    }

}

@media(min-width: 1024px) {
    .section--news {
    background-image: var(--bg-desktop);
    /* background-position-y: calc(0px - 200vh); */
}

.wrap--news {
            min-height: 100vh;
     min-height: 100dvh;
        grid-template-columns: auto;
        grid-template-rows: max-content 1fr max-content; /* 第一行高度自适应，第二行撑满剩余 */
        grid-template-areas:
            "title"
            "news"
            "discovery";
        align-items: start; /* 从顶部开始对齐 */
        gap: 2rem 3rem;
        padding-bottom: 200px;
    }
    .news-grid {
        gap: 80px;
        /* margin-top: 100px; */
    }
  .news-grid.item-count-1 .news-card {
        /* max-width: 600px; */
    }

    /* 2个卡片: 重新计算 flex-basis 以适应新的 gap */
    .news-grid.item-count-2 .news-card {
        flex-basis: calc((100% - 80px) / 2); 
        /* max-width: 700px;  */
    }

    /* 3个卡片: 覆盖 768px 的规则，变为三列等宽布局 */
    .news-grid.item-count-3 .news-card {
        /* 使用这个公式可以精确计算，它考虑了两个80px的gap */
        flex-basis: calc((100% - 160px) / 3);
    }

    /* 关键覆盖：将第一个元素的 flex-basis 也设置为与其他元素相同 */
    .news-grid.item-count-3 .news-card:first-child {
        /* 这里的规则和上面完全一样，用于覆盖768px时的 'flex-basis: 100%' */
        flex-basis: calc((100% - 160px) / 3);
    }
.news-card:hover .news-card__image,
.news-card:hover .news-card__image img {
    transform: scale(1.05);
}

  .deco-item-left--news {
    width: 300px;
  }
}