Html and Css

Hello There! 👋

Congratulations on completing this challenge 🎉

I like your spirit of learning from mistakes. I've nothing harsh but some insightful thoughts that might improve your code. 💡

1. Center Your Content

There are many ways to center any content; for now, we'll go with a straightforward grid:

body {
    display: grid;
    place-items: center;
}

2. Add some space

Let's give your content some space to breathe using padding:

.product__content {
    padding: 20px; // tweak the value as per your need
    ...
}

3. Order Your Image

I noticed you are using a desktop-first approach and grid, you can order your image like this:

.product-image {
    order: 2; // as the image is next to the content on desktop mode
    ...
}

@media (max-width: 649px) {
    .product-image{
        order: 1;   // reset the image position when on mobile
    }
}

4. Add an Overlay

The challenge has some purple tint on the image which can be achieved by using mix-blend-mode: overlay; and ::before pseudo element.

.product-image {
    position: relative;   // to make sure the overlay does not overflows
}

.product-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-accent);
  z-index: 1;    // bring the overlay on top of the image
  mix-blend-mode: multiply;  // apply the tint effect
}

5. Flex your Stats

Using flex can be more convenient than grid for .stat

.stat {
    display: flex;
    gap: 15px;   // specify gap between each item
    ...
}

// make your flex items vertical on mobile
@media (max-width: 649px) {
    .stat {
        flex-direction: column;
    }
}

Above all your solution looks great! ✨

As I said, you already did an excellent job, but these details will improve it even further. 🚀

I hope this helps 👍

Happy Coding 🤓