Order Summary Component

Hey, really nice work on this one. The overall layout looks great on this one.

Here are some suggestions for the site:

• Right now, there is an error on the console. It looks like the font-family that you are importing. Might want to check that one out.
• The body tag could omit the font-size: 16px since the default is using a 16px.
• Avoid using height: 100vh on a large container like the main as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
• Currently, if you zoom out on your screen, the layout's size/height gets small. For this one, I find the width: 30% usage on the .card causes this because as the size screen gets big, the layout responds to its size and gets bigger as well, creating more space inside the card and letting the content expand as well and just occupying lesser rows. For this one, you could use a rem unit on the max-width and not width:

max-width: # your choice;
width: could use 100% since it is a flexbox

• The music-icon on this is only acting as decoration. Decorative images are just images that doesn't contribute to the overall content of the site. They should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
• The annual plan text could use a heading tag since it gives information about the section's content. The pricing below it could sit on another tag outside the annual plan:

<div>
  <h2>Annual Plan</h2>
  <p>Pricing in here</p>
</div>

• Lastly, the .attribution could be removed from the main tag since it doesn't really belong in there. The .attribution could use footer so that it will be inside a landmark element.

Aside from those, great job again on this one.

nice