Testimonials grid section with Grid Areas

Hello! This is by far one of the best solutions to this challenge that I've seen :) Good job!

I am also learning to stick to BEM, so here is a bit of feedback on that:

Your block is called .card so all elements within that block should start with .card__

For example, you have .card__header and .card__body, which is the way to go. Then in .card__header you have .header__info and in it you have .info__name and .info__status. This work for this challenge, but can get messy on real websites, where there might be other blocks with the same inner elements - those styles will collide.

That is why we use the block name as a unique identifier for all the elements inside it. In your case that means having .card, .card__header, .card__info, .card__name, .card__status. That was bugging me at the beginning, because it is a bit repetitive, but mostly because it doesn't really convey the structure of the nested elements, which I thought it should :) Then I read more about BEM and discovered that conveying structure is not really its purpose, rather it aims to encapsulate styles for a given block and keep the specificity of the selectors consistent.

Here is a great and easy to read article on BEM naming: https://seesparkbox.com/foundry/bem_by_example

Hope that helps :) Keep up the good work!