Responsive bento grid using media queries, grid and flexbox

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

Use gap instead of card margins for grid spacing.

Keep attribution/footer outside your grid.

Use unitless line-height (1.1, 1.5) for scalable text.

Prefer logical properties (margin-inline, padding-block-end).

Place media queries at the end for clarity.

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

-I struggled with fixing the grid layout since the structure misbehaved, but succeeded by using (grid template areas)

-Grid template rows also troubled me at first but I found out that (auto) value makes setting heights easier and is more flexible.

• The (max-width) property is very helpful for setting up responsive images

shout out to: Coding In Public (YouTube) for the amazing help.

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

I still need to understand: -CSS Measurements(pixels, em, rem) Removing hardcoded parts of the code to come up with cleaner and more adaptive code