display flex

Hey Victor your solution looks great. Might be a bit late but i have some proposals/notes:

Does the solution include semantic HTML?

Yes, but i would suggest to replace the <button> elements with <a> elements because buttons should be used for on page actions only. For example a form submission or a modal. Anchor elements are supposed for external links that route you to another page.

Is it accessible, and what improvements could be made? No, you cannot navigate with your keyboard to all the links. Anchor elements in your buttons could solve it. You can also play with the :focus preudo-class. Antoher improvement could be better contrast between your buttons and the background.

Does the layout look good on a range of screen sizes? Yes.

Is the code well-structured, readable, and reusable? Yes.

Does the solution differ considerably from the design? No, your font is not correctly loaded. Use instead of:

src: url(/assets/fonts/static/Inter-Regular.ttf) format("ttf");

the correct format "truetype"

src: url(/assets/fonts/static/Inter-Regular.ttf) format("truetype");

Hope that helps.

Visually, this looks great! I might suggest a little more space between the buttons with a slightly larger gap for ease of user experience/usage (were this a full app).

Nice use of rem measurements to maintain consistency. The inclusion of button interactivity with pseudoclasses is a nice touch as well!

Overall, the HTML and CSS look very well organized and clear. Great work!