Product Preview Card using CSS Grid

I'm no expert, but I've managed to make my media queries work. If you want to take a closer look - check out my solution to this very challenge! And if you have any specific question - hmu, will do my best to answer.

But here's a quick example:

@media only screen and ( max-width: 500px )
{  /* mobile */
    .main-column
    {
         flex-direction: column;
         margin-left: 15px;
         margin-right: 15px;
    }
}
@media only screen and ( min-width: 501px )
{  /* desktop */
    .main-column
    {
         flex-direction: row;
         width: 22rem;
    }
}
.main-column
{
    /* things like background color and styling */
}

P.S. I felt really insprired by the way you've organized your css file.

P.P.S. Great job with the design! ;)

Thanks for your contribution