How to make a similar picture (quote) according to BEM on less(css) in codepen?

Question

css

Let's say the modifier will be the background colors: "Blue, Green, White, etc."

I 'm experimenting here ( link ):
The question in order to understand what Bem is on my own example - that it is necessary for large (long-term supported projects) - I know!
But any criticism is welcome!
But the task is to make everything pixel by pixel (one to one) using Bem and lessjs. What BemHTML structure should correspond to this picture (poster - quote)?

Answer 1

There is a great example of a project made using bem:
https://github.com/alexbaumgertner/hunter-boat