Responsive Recipe Page

What are you most proud of, and what would you do differently next time?

I was able to add an inside border radius to a box using the radial gradient. This was done for the desktop design.

Here:

{
    background: radial-gradient(circle at 0 100%, white 14px, white 15px),
      radial-gradient(circle at 100% 100%, white 14px, white 15px),
      radial-gradient(circle at 100% 0, white 14px, white 15px),
      radial-gradient(circle at 0 0, white 14px, white 15px);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    padding: 10px;
  }

What challenges did you encounter, and how did you overcome them?

I found it hard to curve the inside of my image container (setting a border-radius on the image itself leaves unwanted space on the edges). I used the radial-gradient CSS trick for it.

{
    background: radial-gradient(circle at 0 100%, white 14px, white 15px),
      radial-gradient(circle at 100% 100%, white 14px, white 15px),
      radial-gradient(circle at 100% 0, white 14px, white 15px),
      radial-gradient(circle at 0 0, white 14px, white 15px);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    padding: 10px; 
 }

What specific areas of your project would you like help with?

N/A