order-summary-component using html and css

Good job my friend.

• There is a little tips to improve the accessibility :

1. Any section element should contain a heading but in this challenge there is no heading so you need to delete <section> element like code below:
2. Heading should increase one by one from <h1> to <h6>, in your code you jumped from <h1> to <h4>, try to replace <h4> by <h2> and if you need to descrease the font-size you can do that by css, please check code below.

<main>
    <img src="images/illustration-hero.svg" alt="hero dancing">
    <article>
      <div class="text">
        <h1>Order Summary</h1>
        <p>You can now listen to millions of songs, audiobooks, and podcasts on any
          device anywhere you like!</p>
      </div>

      <div class="plans">
        <div class="img-plan">
          <img src="images/icon-music.svg" alt="">
          <div class="price">
            <h2>Annual plan</h2>
            <p>$59.99/year</p>
          </div>
        </div>
        <a href="#">Change</a>
      </div>
      <button>Proceed to Payment</button>
      <a href="#" class="order">
        Cancel Order
      </a>
    </article>
  </main>

• I hope you find this helpful.