How to deal with mini blocks of sections in BEM naming convention?

Question

markup 1: - below I've created "about section" block. in this block have some mini blocks like:- stats and features.

` <section class="about">
    <div class="about__container">
      <div class="about__header">
        <h2 class="about__title">about title</h2>
        <p class="about__sub-title">about sub title </p>
      </div>
      <div class="about-stats">
        <div class="about-stats__item">
          <div class="about-stats__title">stats title</div>
          <div class="about-stats__sub-title">stats sub title</div>
        </div>
      </div>
      <div class="about-features">
        <div class="about-features__item">
          <div class="about-features__icon">features icon </div>
          <div class="about-features__title">features title </div>
        </div>
      </div>
    </div>
  </section>`

Question from about code:- Should i need to create new css file to each block like about.css, about-stats.css and about-features.css or create one file for this block about.css ?

markup: 2

`<section class="about">
    <div class="about__container">
      <div class="about__header">
        <h2 class="about__title">about title</h2>
        <p class="about__sub-title">about sub title </p>
      </div>
      <div class="about__stats about-stats">
        <div class="about-stats__item">
          <div class="about-stats__title">stats title</div>
          <div class="about-stats__sub-title">stats sub title</div>
        </div>
      </div>
      <div class="about__features about-features">
        <div class="about-features__item">
          <div class="about-features__icon">features icon </div>
          <div class="about-features__title">features title </div>
        </div>
      </div>
    </div>
  </section>`

question from above code:- should we mix child blocks with parent block or markup 1 is good ?