Grid styled product card

Issue

I'm using react and I want to create a product card that looks like the image shown

I used map to fit the data now styling it is where I'm having an issue cos I used display grid, here's the code

<div className="incentive-card">
        <div className="incentive-card-header">
          <h3>The power of your donation</h3>
          <p>
            Every drop of blood can transform a life. By donating blood, you
            support accident victims, patients in surgeries, and your community.
          </p>
        </div>
        <div className="incentive-product-card-container">
        {InData.slice(0, 3).map((d) => (
          <div className="product-card2">
            <div className="incentive-card-text">
              <h3>{d.title}</h3>
              <p>{d.description}</p>
            </div>
            <div className="incentive-card-image">
              <img src={d.image} alt="/" />
            </div>
          </div>
        ))}
        </div>
        <div className="incentive-product-card-container">
        {InData.slice(3, 5).map((d) => (
          <div className="product-card2">
            <div className="incentive-card-text">
              <h3>{d.title}</h3>
              <p>{d.description}</p>
            </div>
            <div className="incentive-card-image">
              <img src={d.image} alt="/" />
            </div>
          </div>
        ))}
        </div>
      </div>

the styling code is

.incentive-card {
  margin-top: 80px;
}

.incentive-card-header h3 {
  color: #454444;
  font-family: Inter;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-bottom: 30px;
}

.incentive-card-header p {
  color: #454444;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 0 20px 0 20px;
  width: 769px;
  margin-left: 20%;
}

.incentive-product-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  align-items: center;
  padding: 0 5rem;
  gap: 20px;
  row-gap: 40px;
  margin-top: 40px;
}

.incentive-card-text {
  width: 350px;
  height: 190px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  color: #121212;
  border: 1px solid rgba(249, 194, 46, 1);
  background: rgba(249, 194, 46, 1);
  border-bottom: none;
  padding-top: 25px;
}

.incentive-card-text:hover {
  border: 1px solid #000;
  background: #000;
  color: rgba(249, 194, 46, 1);
}

.incentive-card-text h3 {
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-bottom: 10px;
}

.incentive-card-text p {
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  justify-content: center;
  margin-top: 20px;
  padding: 0 10px 0 10px;
}

.incentive-card-image img {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 350px;
}

And this is what is being displayed

So does anyone have an idea How I can replicate what's been shown in the first image

Solution

Well, I just realised that I didn't name the div tag of the second product-card div. Doing that helped me style it accordingly

So here's the adjusted code

<div className="incentive-product-card-container">
    {InData.slice(0, 3).map((d) => (
      <div className="product-card2">
        <div className="incentive-card-text">
          <h3>{d.title}</h3>
          <p>{d.description}</p>
        </div>
        <div className="incentive-card-image">
          <img src={d.image} alt="/" />
        </div>
      </div>
    ))}
    </div>
    <div className="incentive-product-card-container2">
    {InData.slice(3, 5).map((d) => (
      <div className="product-card2">
        <div className="incentive-card-text">
          <h3>{d.title}</h3>
          <p>{d.description}</p>
        </div>
        <div className="incentive-card-image">
          <img src={d.image} alt="/" />
        </div>
      </div>

and the adjusted styling

.incentive-product-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  align-items: center;
  padding: 0 5rem;
  gap: 20px;
  row-gap: 40px;
  margin-top: 40px;
}

.incentive-product-card-container2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  transform: translateX(15%);
  align-items: center;
  padding: 0 5rem;
  gap: 20px;
  row-gap: 40px;
  margin-top: 40px;
}

Answered By - Samson Iweibo