How to build a structure according to BEM?

Question

css

In one video I saw the following example:

<section class="section-header">
  <div class="section-inner">
    <div class="section-header-logo"></div>
    <div class="section-header-content">
      <div class="section-header-wrapper">
        <div class="section-header-wrapper__title"></div>
        <div class="section-header-wrapper__subtitle"></div>
      </div>
    </div>
  </div>
</section>

There are many blocks here, and only starting from the header-wrapper block do the elements appear - section-header-wrapper__title and section-header-wrapper__subtitle. Is this approach correct? Or, logically, the entire section-header should go as the main block, and the rest of the divs as its elements.

<section class="section-header">
  <div class="section-header__inner">
    <div class="section-header__logo"></div>
    <div class="section-header__content">
      <div class="section-header__wrapper">
        <div class="section-header__wrapper-title"></div>
        <div class="section-header__wrapper-subtitle"></div>
      </div>
    </div>
  </div>
</section>

Answer 1

There is more to be said here

<header class="header">
  <div class="header__inner">
    <div class="header__logo"></div>
    <nav class="header__nav"></nav>
  </div>
</header>
<section class="intro">
  <div class="intro__wrapper">
    <h1 class="intro__title"></h1>
    <div class="intro__subtitle"></div>
  </div>
</section>