So I've created a simple landing page for a fictional company so that I could try out css-grid and I've tried making the site responsive. First I tried without media queries but later I think media queries where necessary. The thing is that on the browser everything looks fine whenever I resize. Everything fits so to say. But when I access the site from my phone it is kinda zoomed in. The same can be seen when you try the site out in the devtools and choose different devices to try the site out.
I thought that this issue would be solved by adding the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag. But it didn't solve the issue.
It looks like your site is hitting a minimum width. I opened it in a browser on my computer and resized the window and the words in the heading seem to be wrapping properly as the page gets smaller and smaller. However, when the window gets too small, they stop wrapping. I suspect this could be caused by a minimum width.
Looking at your css code in your repo, it looks like your grid-template-columns might be the cause of the minimum width. Perhaps this line:
grid-template-columns: repeat(3, minmax(150px, 300px));
For viewing the site on mobile, specifically, I would recommend having a single column all the way down the page. It's hard to put multiple columns next to each other on a mobile device such as a phone in portrait orientation without each column becoming "too squished".