Hi Joanna. I've noticed that the body has margin-left: 8px and margin-right: 8px, which affects the title width on mobile devices. That makes the h1 to be displayed on two lines when it should be on a single line. I would recommend implementing a CSS reset or normalize. Specifically, you might want to consider adding the following to your base styles: body { margin: 0; padding: 0; font-size: 62.5%; } This will remove default margins and padding, and set the base font size to 62.5% (which equates to 10px if the user hasn't changed their browser's default font size). This approach can help ensure consistent styling across different browsers and devices.
I also suggest applying box-sizing: border-box to all elements. This prevents padding and border from increasing an element's total width and height, making layout calculations more intuitive:
*, *::before, *::after { box-sizing: border-box; }
That's the only things I found to improve, the rest of the card look identical to the design.
Cheers!
