Recipe page

First of all, great job! Your solution looks fantastic on desktop. However, I noticed that this challenge becomes a bit easier if you take a mobile-first approach. I would recommend going in that direction.

Try to avoid using px and instead, make more use of rem or em units.

One thing I’ve found useful for giving an element a fixed width on large screens while keeping it responsive on smaller screens is to set both a percentage width and a fixed max-width. For example:

.card-hero {
    width:100%;
    max-width:20rem;
}

I hope you found this comment useful, and good luck on your coding journey!