Solution made with Flexbox and mobile first

Hi! For me your solution sees great with flex (maybe I would the media querie to a lower min value) but as you say, maybe it's more elegant with grid because the use of that extra div. I got this way: first, remove that div

.cards{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
.card__supervisor {
    grid-row: 1/3;
}
.card__calculator {
    grid-column: 2/3;
}
.card__karma {
    grid-column: 3/4;
    grid-row: 1/3;
}

Feel free to try it! Your solution is great and I hope this help you :D

I'll tell you what I did -> I'll keep the code minimum, since I'm writing this from mobile.

This is mobile first approach

<main> //.   column flex
   <div.container>
    <div.cards>  //column flex and  @media min width 1000px flex row
     .card1
      <div.middle-cards> //column flex
        .card2
        .card3
      </div>
     .card4
    </div>
   </div>
</main>

For a better idea you can check out my code for this challenge.