Responsive order summary component html css

Hello Yuliya, Great work! I would like to comment on the structure of your HTML elements and the usage of BEM methodology.

HTML elements structure: you do not need to add extra unnecessary divs, example:

<div> <a class="card-subcription__button">Change</a> </div> Always think of [block and inline level elements](https://www.geeksforgeeks.org/html-block-and-inline-elements/).

BEM methodology: You can find all your answers in this article

<main class="background"> <article class="card"> <img src="./images/illustration-hero.svg" alt="hero image" class="card__hero" />

    <h1 class="card__headline">Order Summary</h1>

    <p class="card__paragraph">
      You can now listen to millions of songs, audiobooks, and podcasts on
      any device anywhere you like!
    </p>

    <div class="card__subscription">
      <img
        class="card__icon"
        src="./images/icon-music.svg"
        alt="icon music"
      />

      <div class="card__details">
        <h2 class="card__plan">Annual Plan</h2>
        <p class="card__price">$59.99/year</p>
      </div>

      <a class="button button--text">Change</a>
    </div>

    <button class="button button--contained button--primary">
      Proceed to Payment
    </button>

    <button class="button button--secondary">Cancel Order</button>
  </article>
</main>

Best, Walid Hawari

Hey Yuliya, Great work! I would like to comment on css.

you can wrap .card__text, .card-wrapper__subscription and .card-footer with another element and then add padding 3rem instead of add margin(left and right) for each element.