Stats Preview Card Component - HTML and CSS only

Nice you are doing great. I have a few tips

• When adding the height on the body, make it a habit of using min-height: 100vh; this will make the page responsive. The page will grow as content is added.
• I made some modifications on your css all lines with /**/ are things that I modified. See if you understand what I did, if not feel free to ask.
• Lines that are commented out, you can delete them.

body {
  min-height: 100vh; /**/
  font-family: Inter, sans-serif;
  font-size: 15px;
  background-color: hsl(233, 47%, 7%);
  text-align: center;
  display: grid;
  place-items: center; /**/
}

/* style for component */
.component {
/*   margin-top: 70px; */
  width: 325px;
  color: white;
  background-color: hsl(244, 38%, 16%);
  border-radius: 12px;
/*   z-index: 1; */
  /* centering the component */
  position: absolute;
/*   top: 50%; */
/*   left: 50%; */
/*   transform: translate(-50%, -50%); */
}

/* adding color filter to image */
.image::before {
  width: 325px;
  height: 240px;
  content: "";
  position: absolute;
  background-color: hsla(277, 60%, 47%, 0.6);
  mix-blend-mode: multiply; /**/
  border-radius: 12px 12px 0 0;
}

/* image */
.image img {
  width: 325px;
  height: 240px;
  border-radius: 12px 12px 0 0;
}

/* style for component content */
h1 {
  margin: 40px 30px 0;
  font-size: 28px;
}
h1 strong {
  color: hsl(277, 64%, 61%);
}

p {
  margin: 20px 30px 0;
  max-width: 350px;
  line-height: 1.5;
  color: hsla(0, 0%, 100%, 0.75);
}

/* style for stats section */
.row {
  margin: 35px 30px 30px;
  display: grid;
  row-gap: 28px;
}

.box {
  display: grid;
  row-gap: 8px;
}

.stat-num {
  font-size: 24px;
  font-weight: 700;
}

.stat-title {
  color: hsla(0, 0%, 100%, 0.6);
  text-transform: uppercase;
}

/* style for larger screens */
@media screen and (width > 1115px) { /**/
/*   body { /* you don't need to repeat this here. it's already above */
    min-height: 100vh;
  } */
  .component {
/*     margin: 0 20px; */
    width: 1110px;
    height: 445px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }