Evaluate the BEM layout?

Question

HTML

I created two new blocks in the profile block, a block that consists of an avatar and a button to add to friends, the second block consists of contact information. But I don't understand what block to write for the elements of contact information and avatar, add to friends buttons. I checked here for BEM errors, the validator does not swear, but for some reason it seems to me that I am doing something wrong.

<div class="profile" id="menu1">
        <div class="page-photo">
            <div class="page-photo__avatar"></div>
            <button class="page-photo__add-friend" type="button" name="button" aria-label="Добавить в друзья">
                Добавить в друзья
            </button>
        </div>
        <div class="page-info-wrap">
            <form class="page-info-wrap__form-info" action="index.html" method="post">
                <input type="text" class="page-info-wrap__name" id="name" value=""
                       placeholder="Ваше имя?">
                <input type="text" class="page-info-wrap__city" id="my-city-id" value=""
                       placeholder="Ваше место проживания?">

                <div class="page-info-wrap__field-info">
                    <label for="family-status" class="page-info-wrap__description">Семейное положение </label>

                    <input type="text" class="page-info-wrap__contact"
                           id="family-status" name="" value="" placeholder="Семейное положение?">
                </div>
                <div class="page-info-wrap__field-info">
                    <label for="Number" class="page-info-wrap__description">Телефон </label>

                    <input type="number" class="page-info-wrap__contact"
                           id="Number" name="numb" value="" placeholder="Ваш номер телефона?">
                </div>
                <div class="page-info-wrap__field-info">
                    <label for="e-mail" class="page-info-wrap__description">E-mail </label>

                    <input type="email" class="page-info-wrap__contact"
                           id="e-mail" name="" value="" placeholder="Ваша почта?">
                </div>
                <div class="page-info-wrap__field-info page-info-wrap__hobbies-field">
                    <label for="hobbies" class="page-info-wrap__description">Интересы </label>

                    <input type="text" class="page-info-wrap__contact"
                           id="hobbies" name="" placeholder="Ваши интересы?" value="">
                    <button type="button" id="btn-add-hobbies" class="page-info-wrap__add-hobbies" name="button">
                        Добавить
                    </button>
                    <ul class="page-info-wrap__hobbies-list">
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

BEM is, first of all, the ideology of layout building. the piece of code itself looks quite BEM-like, although I see "B" and "E", but I do not observe "M"

Answer 2

There is no M in the BEM code. This is if some Element has a Modifier. For example, if a certain button is not just default, but inactive. Or some menu item will be highlighted as active. Or the picture when hovering the mouse will be with a shadow.
Therefore, you need to add more css to make it clear whether everything is bemno here. But even what is - quite invested in this methodology.