html and css

Congratulations on completing this challenge! Good use of CSS variables, and well-organized styles. The mobile version is looking good; You can improve it by doing the following:

Remove margin: 1rem from the body and add it to the container. Change font-family: Fraunces, san-serif; to font-family: Montserrat, san-serif;

Remove width: 700px from the container. This is unnecessary in mobile as the container will try to take up the width of screen; with the margin added, the container fits nicely and looks great.

H1 and .main-price both have font-family: Fraunces, serif;

Remove the media-query with max-width 600px. Now your mobile view looks like the design!

The desktop view is more problematic, but easily fixed. Try this:

      @media (min-width: 600px) {
        body {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          /* add */
          min-height: 100vh;
        }

        .container {
          max-width: 700px;
          /* display: flex; */
          flex-direction: row;
        }
        #product-img {
          /* object-fit: cover; */
          width: 100%;
          border-radius: 1rem 0 0 1rem;
        }
      }

Hope this helps! And keep on coding.