Responsive Order summary component using CSS Grid/Flex

This project was very fun to do. I found it fairly straight-forward to do although I do have one question I would appreciate some advice on!

While giving "Cancel Order" the cursor: pointer command on :hover and :active, I noticed that the whole area from left to right of "Cancel Order" was clickable, I only wanted the text to be clickable, yet I was unable to do that. I am unsure if it was a simple solution and it has escaped me while making this project.

Overall feedback and/or suggestions of code changes would be greatly appreciated for me to take into my next projects. :)