Question about BEM and ATOMIC CSS

Hi,
I have a question about the bem methodology mixed with a little bit of atomic css.
For instance, we have this piece of code:

<!-- Single integration -->
   <div class="integration integration--dropbox flex items-start">
  <div class="integration__photo flex-shrink-0">
  <img class="integration__img js-lazy" data-src="src" alt="">
  </div>
  <div class="integration__text">
  <h4 class="heading h4 h4--margin-xs">Dropbox</h4>
  <p class="standard-text">Some text.</p>
  <p class="text-label text-label--styled text-label--integration text-label--dropbox">Dropbox</p>
  </div>

  </div>

---

You can see here we have a single block, called integration that look like this:

For align the icon with the text element we have used flexbox, but instead of defining it on the css we have defined it throught html classes.

Now, following the bem guidelines, do you think this is correct? Or I have to put the flexbox layout in the .integration selector like normal css?

---

Thank you for reading

Anyone?