Responsive interactive card form with mobile-first approach

The challenge gave me a really hard time when I tried to position the elements on the page. In the end, I reached the desired result, but there are still some small issues I haven't managed to solve, like:

• when focused, the inputs don't have rounded corners. Thanks to Stack Overflow I've managed to make the color of the focused input with the gradient but the property border-radius doesn't work with it 😔
• I wonder whether there is a better solution to make the card number input have spaces between every 4 digits entered. Right now I force a user to make these spaces manually by showing a corresponding error message, but as I understand the input should make it automatically.

If you have any ideas on how to deal with the issues or just want to leave general feedback on my solution, please do it) thanks in advance🙂