CSS Grid, Flex Box, JavaScript

Hey there! Your solution works and it looks good.

For your button problem, I would suggest that you use radio buttons instead; radio buttons have a :checked pseudo selector which can be used to make the buttons have a different color when pressed and stay with it unless you press some other tip percent. In short, it would be better to scrap the buttons in the "percentages" div and use <input type ="radio"> form inputs instead. Although styling them is another issue to take care of, using radio buttons is more semantic and gets the job done.

You can put some background color (grey) on your input fields (number of people, custom and bill).

You can disable your reset button once you click it and use it as default state for that button, using disabled property in your js code (document.querySelector('reset__button').disabled=true) and put a styling in your css for the disabled button using :disabled selector.

You have used a transition of .7s in your container. When zooming in or out of the viewport, it is taking it slow. You may remove it if you wish to since it has no purpose. In case you are using it for hover effects, just use the same transition in button: hover itself instead of applying it to all elements.

Hope this helps :).