I liked your solution. It is very close to the design.
However, you could improve accessibility by adding landmarks such as <header>, <main>, <section>, and <footer> to help assistive
technologies navigate the content.
Your layout is designed to be responsive with max-width: 360px set on .container to ensure it adjusts for smaller screens. However, for larger screens, the content is centered and doesn't expand beyond a certain width. Consider using media queries to adjust the layout for larger screens to make better use of available space.