Order Summary Component

Hi, the newbire here:) I compare solutions with mine to understand other perspectives. This is a really good solution. Well done. I want to say something about your solution. You may want to use them.

1 - You should use <div> tag as little as possible. It's not semantic and modern. Please check this resource and apply the structure to your code. click here

2 - Do not use the element selector alone in CSS. It's not a problem in a small project like this, but you don't need this behavior. Also you don't need to give a class every element. Instead, you can use descendant combinators with their parents. They're a clear solution with your class name and selector specificity. For example, you can write .info-section h2 instead of h2. I think you already know this, I just wanted to remember them.

3 - You can use this structure to add <a> tag: a:link, a:visited {} a:hover, a:active {} Also, you should use <a> tag with :link pseudo-class everytime (if the a tag is a link).

4 - You can use flexbox with 1-dimensions layout and basic components. At the same time, CSS Grid is a good solution to 2-dimensions layout and complex components. We can use both of them at the same time in a project, it's not a problem.

I'd prefer to use CSS Grid with complex components like Annual Plan Area. Here is my grid solution, you may check them.

 <header class="content-area__subscriptions--plans">
            <img class="plans_el--1" src="./images/icon-music.svg" alt="" />
            <p class="plans_el--2">Annual Plan</p>
            <a class="plans_el--3" href="#">Change</a>
            <p class="plans_el--4">$59.99/year</p>
          </header>

/* The Grid Template (Start) */

.content-area__subscriptions--plans {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: repeat(2, 1fr);

  padding: 1.563rem 1.5rem;

  background-color: var(--very-pale-blue);
  border-radius: 0.688rem;
  column-gap: 1.25rem;
}

.plans_el--1 {
  grid-column: 1;
  grid-row: 1/-1;
  justify-self: center;
  align-self: center;
}
.plans_el--2 {
  justify-self: start;
  align-self: start;

  font-style: normal;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.313rem;

  color: var(--dark-blue);
  vertical-align: top;
}

.plans_el--3:link,
.plans_el--3:visited {
  grid-column: 3;
  grid-row: 1/-1;
  justify-self: center;
  align-self: center;

  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.188rem;

  color: var(--bright-blue);

  /* The straight line */
  text-underline-offset: 5px;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}
.plans_el--3:hover,
.plans_el--3:active {
  color: hsl(245, 83%, 68%);
}

.plans_el--4 {
  justify-self: start;
  align-self: end;

  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.313rem;

  color: var(--desaturated-blue);
}

/* The Grid Template (End) */

I hope these'll help you to improve your perspective. Keep coding. All the best.