Flexbox and fluid typography with CSS clamp() and viewport units

Hey guys!

Playing with fluid typography using viewport units and CSS clamp() function on this project. Also using Flexbox with minimal media queries. Intentionally not pixel-perfect, I wanted to compare how close the ‘fluid’ approach came to the design. Currently applying clamp() on individual elements, but declaring global variables under root in a similar approach (t-shirt sizing) is on my list for a future build.

Any suggestions/feedback always welcome, and thoughts on my implementation of CSS clamp() would be greatly appreciated! I focused on font sizes, but I’ve also applied to some widths, margin/padding, and a row-gap in there with it to experiment with what all I could do with it now that I’m getting the hang of the calcs. I went with a formula for the preferred (middle) variable instead of a single value.

A couple of questions:

• Math(s) question: how much precision do you apply in your function variables? Two decimal places? Three? Four? Wondering what the best practice is here.
• I used em units for line heights (based on the design), though I realize this is a bit simplistic. I’ve also seen clamp() used for line height in relation to text length (longer width text with more line spacing, and vice versa). More of a design question, but curious what anyone else has seen or used? Any method you preferred or found worked better?
• And finally, buttons vs. links! I used a link for “Proceed to Payment,” seemed to me it was intended to take the user to a new screen instead of submitting data to the server. Styled to look like a button to match the design. If it was on a full page, and if it generated a pop-up/modal I could perhaps also see an argument for button (type=button)? What do you guys think?

Thanks!