Hi I display list of cards using map function and flex-wrap: wrap in css, it looks like this list of cards

Is there any possible way to make first card 3x bigger than other so it looks like this list of cards, what css property can help me to solve this problem? Or should I change html and create an external component just for this card?

Here is an html for this block

<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>

And 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 {

    }
  }
}

CodePudding user response：

You can use the css selector :first-of-type:

.card:first-of-type{
   // styles here
}