How to use adaptive mesh + BEM methodology?

Question

css

There is a collector for gulp + sass + pug (like TARS). There is a components folder in which the so-called components are stored in separate folders (for example, button.pug, button.scss, button.js). That is, all markup, styles and js for a particular component are stored in one folder.
I'm also trying to use the grid from foundation 6.
But there are a few things I don't understand.
1) For example, the header of the site in which the logo, text and phones are displayed. In this case, there are components Logo, Link-phone. I do something like this:
Is the header considered a BEM block?
What will be the "Text lorem ipsum" here? Where to describe his styles? In general, where to describe general styles that do not apply to a component / block?

<header class="grid-x">
    <div class="cell">
      +logo()
    </div>
    <div class="cell">
      Текст lorem ipsum
    </div>
    <div class="cell">
      +tel-link()
    </div>
  </header>

2) Take for example the Logo block. He needs to set some indents. I don’t want to add classes to the Logo block itself, so I add them to the wrapper (cell).
But what if there are some indents on the mobile version, and others on the PC? It turns out with the help of a grid it is impossible to control padding and margin normally?
You can try to completely get rid of the grid, but how then to lay out the header? Can I make one common file for styles that are not related to components?

<header class="header">
    <div class="header__logo-block">
      +logo()
    </div>
    <div class="header__text-block">
      Текст lorem ipsum
    </div>
    <div class="header__phones-block">
      +tel-link()
    </div>
  </header>

Answer 1

header is a block. You can go further from it: create elements and add modifiers.
PostCSS has mixins. You just import them in one resolution or another, depending on how the block/element should look