All solutions

Q1: Scaling elements with "fixed" Children

One aspect of the project I wasn't able to figure a satisfying solution for was how to scale the credit card images down and keep the fixed fonts in proportion to the image. I ended up with 2 static sizes instead of doing a smoother transition between them.

Q2: Masking inputs credit card info

I was looking for a library to do the masking for the credit card number inputs. I couldn't find one very quickly so I ended up using a regex solution instead. It's not very satisfying as it doesn't apply to the input itself, and allows users to input the spaces instead of automatically handling that for them.

Q3: Working with angular

Would it have made more sense to split this page up into separate components and services? Once finished, I thought it would be appropriate to break pieces up so that they could be re-used across other theoretical parts of a UI. Similarly, breaking up the scss sheets would make it easier to read and apply them to their specific components.

Q1: Keeping border radiuses in-sync

While I typically just eye-ball border radiuses when there is a container with one and another close element inside (in this case an image). Though I'd imagine theres some ratio that could be set in order to keep the inner radius in proportion to the out radius. Has anyone ran into a good way to factor this in? I was thinking just use a calc for the inner radius.

Q2: Extra space at the bottom of the card

I couldn't figure out what was dictating the extra padding at the end of the card in the mockups. I ended up adding a padding-block-end to make it match the style but it's unsatisfying and likely won't as nice with other lengths of content. Is there something from the design I'm missing?