Testimonials Grid

Fantastic solution! I also used .card:nth-child(n) to target the different cards instead of using class variants of .card i.e .card--black, .card--black-blue etc

You've specified the grid positions to a very fine level of detail, personally I told certain cards to span, and gave some of them orders to achieve a look. This allowed me to use less CSS and give a couple more interim layouts between the mobile and desktop sizes suggested to make it more responsive

@media (min-width: calc(720em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial:nth-child(1) {
    grid-column: span 2;
  }

  .testimonial:nth-child(4) {
    grid-column: span 2;
  }

  .testimonial:nth-child(5) {
    grid-row: span 2;
  }

  .testimonial:nth-child(3) {
    order: 1;
  }

  .testimonial:nth-child(4) {
    order: 2;
  }
}

@media (min-width: calc(1080em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .testimonial:nth-child(3) {
    order: 3;
  }
}

@media (min-width: calc(1440em / 16)) {
  .testimonials {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .testimonial:nth-child(3) {
    order: 1;
  }
}