Fylo data storage component with flex and grid

What are you most proud of, and what would you do differently next time?

Create and adapt the formatting from the mobile version to the desktop version.

What challenges did you encounter, and how did you overcome them?

Create the triangle with the ::before pseudo-element and create a smooth transition between the mobile to the desktop version.

What specific areas of your project would you like help with?

I wasn't able to use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); on the .card. The grid didn't "expand" from 1 column to 2 column without a media query.

To make it work I had to disable the display: flex; that I used on the body to center the .container vertically and horizontally. But then the .container was not centered. I also tried margin: auto; on the .card but it didn't work either.

So I used grid-template-columns: minmax(250px, 700px); instead.

Is there a way to center the .container without disrupting the way grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); must work on the .card?