All solutions

In the mobile version, the image doesn't shrink under 388px, I don't understand why. On my iPhone 12 it looks fine, but in the dev tools there is a horizontal scroll. Any suggest?

How can I show the background image in the upper right corner?

I would like to have some feedback about JS and the error status. I have set the error message under each input field in a p element with the hidden class being removed via JS when the field is empty.

I have seen other solutions that add the error message via JS, I wondered if there was a recommended method or if both approaches are acceptable.

Furthermore, is the event handler's logic correct or are there more straightforward methods?

This is the first challenge where I follow the mobile-first approach. I'd love to have some feedback on this and the HTML structure if that's okay or there's something to fix.

Also, I have 2 more questions:

1. Can anyone explain to me how to translate the unit of line-height in Figma into CSS units? Figma calculates line-height percentages based on font size, but if I use percentages in CSS it's not ok. What does it correspond to in CSS units?

2. Why can't I use a color declaration in the background property in the footer but have to use linear-gradient to make it work?

background: linear-gradient(rgba(77, 151, 169, 0.85), rgba(77, 151, 169, 0.85)), url(assets/mobile/image-footer.jpg) top center/cover no-repeat;

I had some difficulties in understanding which solution to adopt for social icons, I would like to know if there is a better solution than mine in this situation.

The price section could be a bit tricky so I advise you to look readme file in the repository to read my tip for it.

In the "card-plan" section I was undecided whether to use flexbox or grid. I used grid but I'm not sure it was the best choice, I'd like to have some advice on my choice.

Another doubt I have about the HTML structure, I could have organized it better using some semantic HTML tag or is it ok?