Responsive Four Card Feature Section

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

I'm proud that I focused on the semantic nature of HTML. used visually hidden elements to provide context to screen readers users. and tried to organise headings properly to have a good outline for accessibility users.

I also used custom properties to override the styles of each feature card. which lead to a more readable CSS style sheet.

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

The layout of the cards on the desktop was challenging.

The way I did it was to have a grid of 3 columns and 4 rows. make each card span 2 rows. and laying them out using grid-areas and empty cells.

It was also challenging to know when to change the layout I chose a break point of 992px because bootstrap uses that to denote small desktop devices.

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

Thank you for checking it out my solution. Iet me know if it looks good on the device you're using.