Four Card Layout

I think your on the right track, a nicer solution that I found online was using grid-template-areas. This is what my solution looked like for main:

.featured-cards-grid {
  display: grid;
  grid-template-areas:
    'a'
    'b'
    'c'
    'd';
  gap: 30px;
  max-width: min(95%, 69.375rem);

  @include a.breakpoint(medium) {
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-areas:
            '. b .'
            'a b d'
            'a c d'
            '. c .';
  }

  // Sets a grid area for grid children
  & > :nth-child(1) {grid-area: a;}
  & > :nth-child(2) {grid-area: b;}
  & > :nth-child(3) {grid-area: c;}
  & > :nth-child(4) {grid-area: d;}
}

You have more control on where the children of the main goes. Obviously that just one solution, there are many other solutions. I recommend either going with the one your comfortable with or if you want to challenge yourself use the one your not comfortable with.