All solutions

I was quite confused about how the number cards looked like what they are in the screenshot, specifically the horizontal line in the middle of the card. On the other hand, at first, I was kind of lost about how to make the card flip from the middle when a number changes for the bonus, though I eventually succeeded with some trials and errors.

I tried my best to replicate everything in the design and was satisfied with the result, though it was not a smooth process. I spent the most time working on the correspondence between large images and thumbnails, and that on the big screen and in the lightbox.

I had a bit of a hard time making the absolute positioning of the credit card front and back images and the text on them appear in the right place. Just wondering if there's a better way to work on their positions.

Not sure if this is the correct way (set as background-image) to fit an image in a grid that would resize according to the size of the grid. I am also wondering whether a similar result could be achieved using an image tag in the HTML. I've tried with styles like {width: 100%; height: auto} or the reverse, but the image scales down too much when the width of the screen shrinks leaving blank space at the bottom.