Html 如何使列表的第一个元素比 css 中的其他元素大

您好，我使用map函数和flex-Wrap:WRAP in CSS来显示卡片列表，如下所示 list of cards个

有没有可能使第一张牌比其他牌大3倍，这样看起来像list of cards张，有什么css属性可以帮助我解决这个问题？或者，我应该更改html并为这张卡创建一个外部组件吗？

这是此区块的html

<div className={styles.second_part}>
        {
            news.filter(cat => cat.category === "Category").slice(0,8).map((i)=>(
                <div className={styles.normal_card}>
                    <div className={styles.normal_card_img}>
                        <Link href={'/news/'+i._id}>
                            <img src={i?.image} alt=""/>
                        </Link>
                    </div>
                    <div className={styles.normal_card_desc}>
                        <Link href={'/news/'+i._id}>
                            <h2>{i.title}</h2>
                            <span>{i.description?.length > 150 ? `${i.description?.substring(0, 150)}...` : i.description}</span>
                        </Link>
                    </div>
                </div>
            ))
        }
        </div>

和css

.second_part{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .normal_card {

    width: 24%;
    justify-content: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #EDEDED;

    .normal_card_img {
      img {
        width: 100%;
        object-fit: cover;
        height: 300px;
      }
    }

    .normal_card_desc {
      text-align: justify;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      h2 {
        font-size: 16px;
        margin-bottom: 15px;

        &:hover {
          color: #ff4f00;
        }
      }

      span {
        margin-top: 15px;
      }
    }

    hr {

    }
  }
}