Order summary component with scss

Hi!

Very nice solution. I want to suggest you some short advice.

I think you could use the given svg mobile and in media query section the desktop file as backround-image,. The background-repeat property could be no-repeat and a background-size: contain. In this case the svg background pic will only one time on the screen.

Maybe you could use in the html some classes for the same properities, because too much #id is a bit confusing and hard to read/understand the css file.

for example these are in ypur code:

#plan #plan-box {
  ...
}
#plan #plan-box #text {
 ...
}
#plan #plan-box #text h3 {
  ...
}
#plan #plan-box #text p {
...
}
#plan #plan-box #link {
...
}
#plan #plan-box #link a {
...
}
#plan #plan-box #link a:hover {
...
}

Instead of these you can use classes in the html.

for example in html (<p class="bold">) and in css: .bold: {font-weight: 700;} And give all the <p> the "bold" class which you want to be bold, and so on the other properties..

Keep going!