CSS and HTML

With grid, it is fine to use, but is designed for 2 dimensional layouts. As you are only laying things out in one direction - row / column, flexbox is actually simpler.

I just had a play in devtools, which I recommend you doing to understand the different options available to you:

.card {
  /* display: grid; */
  /* grid-template-columns: repeat(2, 500px); */
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  max-width: 60rem;
}

.image__tint {
  /* opacity: 0.5; */
  opacity: 0.8;
  mix-blend-mode: multiply;
}

@media screen and (max-width: 800px) {
  .card {
    /* margin-top: 2rem; */
    /* margin-bottom: 2rem; */
    /* grid-template-columns: 300px; */
    /* grid-template-rows: repeat(2, max-content); */
    /* height: max-content; */
    flex-direction: column-reverse;
    max-width: 30rem;
  }
  .text {
    /* padding: 1rem; */
    padding: 2rem;
  }
  .card * {
    /* width: 100%; */
  }
  .image {
    /* height: 200px; */
    /* grid-column: 1/2; */
    /* grid-row: 1/2; */
    min-height: 200px;
  }
}

.main__paragraph {
  /* width: 90%; */
  /* line-height: 1.5rem; */ // no need for unit on line-height
  line-height: 1.7;
}

.image {
  /* grid-column: 2/3; */
  /* grid-row: 1/2; */
  /* height: 100%; */
  flex: 1 1 50%;
  background-position: center right;
}

.text {
  /* align-self: center; */
  /* grid-column: 1/2; */
  /* grid-row: 1/2; */
  /* padding: 4rem; */
  padding: 3rem;
  flex: 1 1 50%;
}

:root {
  /* --font-size-bc: 15px; */
  --font-size-bc: 0.9375rem;
}

main {
  padding: 2rem;
}

html {
  /* font-size: 15px; */
  font-size: 0.9375rem;
}

Hi I think this still needs some work. In particular

• try not to call multiple css files (poor for performance)
• look up html semantics. It's really important to use meaningful html elements but you're not using any at all at the moment
• never have font sizes in px, always a responsive unit like rem/em
• let your media query start much earlier than what you have atm, as soon as there is room for the layout to switch from mobile to desktop, that's when a media query should kick in
• try to vertically center your component like the design
• fix the mobile alignment of the stats
• remember details like line height
• consider using flex not grid for the layout as it's only going in one dimension

I hope these tips help

Hello, NILANSHU RAJMANE'S!👋

Well done on this challenge

• you can use border-radius for both of your child element image,image__tint.
• When resizing the screen the card hits the end. there is no breathing space for the card. you can add margin get some breathing space.

Amazing work. Happy Coding💪