Single Price Grid Component: WITH NO MEDIA QUERIES

Initially when I started the project my only goal was to make it as close to the design as possible and finish the project in the same day. I achieved both of the goals and since I had a lot of time left until the end of the day, so I decided to add some more challenges for me. The challenge was to make the entire layout without media queries, yap you read that right, WITH NO MEDIA QUERIES. Perhaps the coolest part of CSS Grid is that, if you use them correctly, you can make your layout responsive. That small snippet of code, at the bottom of these text, takes care of the responsiveness of the entire project. However, it would've been impossible without clamp(). This was my first time using clamp(), so I had to do a bit of research to see where and how I can use it. I'll definitely use it in my future projects, perhaps not for max-width, but definitely for font-size. I might've abused the power of clamp() a little bit, but it all was for the sake of completing the project with no media queries whatsoever, just pushing the boundaries 👨🏻‍💻 This tiny project was one of the coolest project that I've done so far, and as you can tell I'm quite excited about it 😅

.cube {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}

Check out useful resources of my **repo for some cool stuff. Definitely, read the article in the last link 👀

And as always let me know if you have any suggestions or questions 👨🏻‍💻 Cheers 👾