Order summary card component

Hi guys,

In this challenge, I tried to use BEM method. But hey, I am unsure of about pricing group code area. It is block or element? I think it is element...

This is my HTML code:

<div class="article-header__card">
    <header class="article-header">
      <figure class="article-header__image">
        <img src="./images/illustration-hero.svg" alt="hero-image">
      </figure>
      
      <section class="article-header__text">
        <h2 class="article-header__text-heading">Order Summary</h2>
        <p class="article-header__text-description">You can now listen to millions of songs, audiobooks, and podcasts on any 
          device anywhere you like!</p>
  
        <div class="article-header__pricing">
          <img class="article-header__pricing-icon" src="./images/icon-music.svg" alt="icon-music">
          <div class="article-header__pricing-wrapper">
            <p class="article-header__pricing-plan">Annual Plan</p>
            <span class="article-header__pricing-tag">$59.99/year</span>
          </div>
          <a class='link-btn' href="#">Change</a>
        </div>
      
        <button class="btn btn-blue">Proceed to Payment</button>
        <button class="btn btn-transparent">Cancel Order</button>
      </section>
    </header>
  </div>

Thanks for advance.