Order Summary Component- Tried Flex, Grid, Variables and Functions

This project uses HTML and CSS, and I tried using concepts I still am trying to get used to (flex, grid, functions and custom variables).

I tried implementing transitions for the active states, but I couldn't get underlines on text to fade out/in. I haven't yet looked into ::before and ::after, which looks like a way of doing it, but wanted to get more comfortable with the core concepts rather than attempting too many new things at once.

Any feedback or suggestions to optimise code or remove redundant code is very much appreciated!