calc() mixes units: width: calc(100% - 80px). clamp(min, preferred, max) creates fluid values: font-size: clamp(1rem, 2.5vw, 1.5rem). min() and max() pick the smaller or larger of two values respectively.
Useful CSS Functions
/* Responsive values */
font-size: clamp(1rem, 2.5vw, 2rem); /* min, preferred, max */
width: min(100%, 600px); /* smaller of two */
width: max(200px, 50%); /* larger of two */
/* Math */
width: calc(100% - 32px);
width: calc(50% - var(--gap) / 2);
/* Colors */
color: hsl(220 90% 56%);
color: oklch(70% 0.2 240);
/* Counter */
p::before { content: counter(para) ". "; }