What's the right way to use BEM here?

Question

BEM

<section id="about">
        <h1 data-animate="Y1">About Our Agency</h1>
        <p id="about-text" data-animate="Y1">We are a new design studio based in
            USA. We have over 20 years of combined experience,
            and know a thing or two about designing websites and
            mobile apps. Clever use of technology and lean
            processes enable us to work faster and smarter.</p>
        <img src="img/about-me-signature.png">
        <div id="stats">
            <h1 data-animate="Y1">Features</h1>
            <div class="stats-main">
                <div class="stats-main-item" data-animate="Y1">
                    <i class="fa fa-clock-o" aria-hidden="true"></i>
                    <div>
                        <p><b>Revenue</b></p>
                        <p>Marfeel's innovation in mobile ad design deliver more than 3x the revenue of industry standards</p>
                    </div>
                </div>
                <div class="stats-main-item" data-animate="Y1">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    <div>
                        <p><b>Power</b></p>
                        <p>Your mobile site powered bu Snow with superior SEO and page speed</p>
                    </div>
                </div>
                <div class="stats-main-item" data-animate="Y1">
                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                    <div>
                        <p><b>Disign</b></p>
                        <p>A mobile experience that is intuitive and smooth and reads like a amazing</p>
                    </div>
                </div>
                <div class="stats-main-item" data-animate="Y1">
                    <i class="fa fa-laptop" aria-hidden="true"></i>
                    <div>
                        <p><b>Brand</b></p>
                        <p>Marfeel tailors the design to your brand maximizing impact</p>
                    </div>
                </div>
                <div class="stats-main-item" data-animate="Y1">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                    <div>
                        <p><b>Disign</b></p>
                        <p>A mobile experience that is intuitive and smooth and reads like a amazing</p>
                    </div>
                </div>
                <div class="stats-main-item" data-animate="Y1">
                    <i class="fa fa-line-chart" aria-hidden="true"></i>
                    <div>
                        <p><b>Solution</b></p>
                        <p>360 degree mobile solution optimized for all devices on all screen size for both mobile web app and native app</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

I started trying, but I can't figure it out. There is a section , in it a block , according to BEM'u should be , then it goes and according to BEM'u should be or ? I'm completely confused, I can not understand how to understand these rules, please help. ps It seems to me, or is BEM a terribly subjective thing? id="about"id="stats"id=about__statsid="stats-main"id=about__stats__mianid=about__mian