Testimonial grid section using CSS Grid and container queries

Hi, there 👋. Great solution!

Here are some tips 💡

Background-image

You can place background image without bloating HTML with just decorative content and avoid relative positioning:

.testimonial {
  background-color: /* your color */
  background-image: /* path to image */
  background-position: /* position relative to container */
  background-repeat: /* turn on/off repeat pattern */
  background-size: /* image size */
}

You can read more about background-* properties on MDN article

BEM

Since you use BEM it's good to make use of modifiers. Modifiers are more appropriate option for alternative style variants for your blocks. For example you could have something like this:

HTML:

<article class="testimonial testimonial_variant_darkblue">
  ...
</article>

CSS:

.testimonial {
  /* default styles */
}

.testimonial_variant_darkblue {
  /* theme specific styles */
}

You still need to use .g-item-{order} selectors for positioning.