Responsive four card feature section [NextJS, TypeScript, TailwindCSS]

Hi everyone, this is my solution of "Four card feature section". This is my first time of using TypeScript and TailwindCSS. I want to ask a question about setting up the grid layout for desktop version in TailwindCSS. I can only use the original way to apply grid-area in global.css.

/* How to achieve below style in TailwindCSS? */
@media (min-width: 1024px) {
  .home__cards-wrapper {
    grid-template-areas:
      "card1 card2 card4"
      "card1 card3 card4";
    align-items: center;
  }

  .card:nth-of-type(1) {
    grid-area: card1;
  }

  .card:nth-of-type(2) {
    grid-area: card2;
  }

  .card:nth-of-type(3) {
    grid-area: card3;
  }

  .card:nth-of-type(4) {
    grid-area: card4;
  }
}
/* END: Card styles */

How would you set up the grid layout for cards of desktop version with TailwindCSS?

Any comment will be appreciated. Thanks for your help!! :D