Why this matters
The production reason.
Fixed spacing often feels cramped on mobile and oversized on desktop. clamp gives you a minimum, a preferred fluid value, and a maximum.
Use it for section padding, hero headings, and gaps where the space should breathe with the viewport.
Keep the bounds intentional so the design does not balloon on very large screens.
Copy-ready example
.hero {
padding-block: clamp(4rem, 8vw, 8rem);
}
.hero-title {
font-size: clamp(3rem, 8vw, 7rem);
line-height: 0.92;
}