CSS has a clamp function that takes a min value, “preferred” value and a max value.
If the preferred value is between min and max, then the preferred value is returned, otherwise the output is clamped based on min and max.
I used this recently on the astro rewrite of this blog while setting margin for my “See all posts” CTA so that it’s dependent on viewport size such that it never goes out of the viewport and smoothly goes inside the viewport as we resize.
margin-right: clamp(-25.5px,calc((900px - 100vw) / 2 - 10px),0px);Ref: clamp() - CSS | MDN