Responsive Four card Feature section using Grid

I have completed this as my 12th challenge in Frontend Mentors. I am glad to accept any feedback and suggestions regarding the accessibility and the techniques that I have used to develop the webpage.

I used the grid layout and used the grid-rows and grid-columns properties to align the card . This has helped me a lot.

.products {
  display: grid;
  grid-gap: 2.5rem;
  grid-template-rows: repeat(4, minmax(max-content, 1fr));
  grid-template-columns: repeat(3, 2fr);
}

.products__card--indigo {
  grid-row: 2 / span 2;
  grid-row-start: 2;
}

.products__card--red {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.products__card--yellow {
  grid-row: 3 / span 2;
  grid-column: 2;
}

.products__card--blue {
  grid-row: 2 / span 2;
}

If anybody has an easier approach then I am happy to hear that and please go through the code and if you have to correct any mistakes I am happy to recive the comments.

Advance thanks for the comments 🫡.