Social Proof Section w/ CSS Grid, Mobile First

Hello

Here's some changes I just made in browser that should help you understand some of these issues if you apply them one by one in devtools (open on the side and zoom out so you still see desktop screen view)

@media screen and (min-width: 62.5em) {
  .container {
    /* grid-template-columns: 40% 1fr 50%; */
    /* max-width: 100%; */
    /* height: 100%; */
    /* padding: 10% 10%; */
    grid-template-columns: 1fr 1fr;
    gap: 10rem;
  }
  .ratings {
    /* grid-column: 3/4; */
    /* margin-top: 5rem; */
    grid-column: 2/3;
  }
}

.container {
  /* padding: 17% 10%; */
  max-width: 1200px;
}

body {
  padding: 1rem;
  min-height: 100vh;
  display: grid;
  place-content: center;
}

.rating__text {
  // note: These make no sense as h2s. Use paragraph instead;
}

.rating {
  // note: Very important to leave alt text blank on these stars;
}

It looks like you're using the mobile background bottom image on desktop screens, that's why that doesn't look right.

Other than that, all looking pretty good on this. Nice use of grid, just make sure you keep the grids as simple as possible. And if using the older grid-gap property, you may as well add the gap property on the line below. Newer browsers that support it will use that, older browsers will fallback and use the grid-gap ones instead.

Good luck with your coding :)

Hey there! Great work on this one.

Regarding the height, you may just put min-height:100vh in the body styles. Never use fixed heights unless for something specific and this is not the one.

When wondering about breakpoints, just ask yourself this question while increasing the width of your viewport from mobile screens, using Dev Tools: at which width or more can my design look better (Talking from a mobile-first perspective)? Once you get it toy around with it and it should work fine.

Hope this helps :).