Responsive Bento Grid using pure CSS

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

Being able to achieve the responsive grid layout. Next time I would try using grid-template-areas property.

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

Sizing the images, used (width:N%,height:auto), making the grid change its layout on different resolutions, the @media queries won't change on any breaking point, so I ended up using flexbox and flex-direction-column.

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

• How to change the grid layout on different breakpoints? Changes won't override the grid layout on different screen resolutions despite writing the media query.

• The "Social Media 10x Faster with AI " cell is a bit bigger in the design than the rest of the cells, but couldn't find a way to achieve this without messing the entire grid. How would you achieve this?