Four Card Feature with Grid and Animation

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

My second attempt with this challenge allowed me to refactor my code and implement new strategies such as:

• css reset in same file as my stylesheet instead of another file to reduce load time

• using list items for cards for screen readers

• adding aria landmarks

• make it more responsive by swapping out px with rem in media query, text, and width

• adding animation upon hover: shine effect and shadow

Next time I would like to play around with tilt animation upon hover with JS.

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

I struggled with using pseudo element to create the colored line on top of each card. The border-radius for them are still not accurate and differ a bit from the design given. If anyone has any tips on how to make the border radius accurate for the pseudo elements, or if you know of another way besides using pseudo elements, please let me know.

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

I would like advice on a few topics I feel iffy about, and would love guidance on:

1. Did I use aria landmarks correctly? Are there other aria roles I should add, or any accessibility concerns I should change?
2. I used rem for max-width for the card containers. Would ch be a better choice, and why or why not?
3. The pseudo element ::after that I used to style the colored rectangles have inaccurate border-radius, as they differ from the design given. I am unable to get it to look like the design.
4. Are there any foundations I need work on? Best practices that I'm not doing?