grid-template-areas solution with Next.js, TailwindCSS, CSS module

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

I made various efforts to enhance the reusability of components,

like:

• storing the card's content information (title, logo, description) as an array of data, allowing it to be flexibly passed as arguments to the card component.
• using grid-template-area to handle changes in screen width only with the parent element of the card.
• using round and overflow-hidden class to make cards round.

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

I needed to change the card layout between the mobile and desktop versions, but achieving this with "flex" was challenging, so I decided to use "grid". While it’s possible to achieve the desired layout with grid-row and grid-column, it would require writing different conditional logic for each card, which would reduce the reusability of the component and make it difficult to process the array data using the map function. I wanted the parent element of the cards to have full control over the layout without adding layout-specific classes to each card. Therefore, I used grid-template-areas to allow the parent element to handle the layout adjustments based on screen size. Since grid-template-areas isn't available as a utility in TailwindCSS, I resolved this by using CSS modules.