Hey, well done on this! It's not an easy challenge and you've clearly had a good go at the card flip animation!
Only a few suggestions from me for improvements:
-
Your numbers can't be h2s. They are changing dynamically which is a problem for the accessibility tree - assistive technology will read out all h2s on the page, so it needs to be static content. I would just have them in a span inside an outer HTML block.
-
On mid-sized screens the cards go quite small and very far apart because you're using
justify-content: space-between;
. instead, I suggest you set that to center and use thegap
property to give the cards some space between.
Hope that helps :)