CSS clamp() for Fluid Typography

font-size: clamp(min, preferred, max);

h1 {
  /* Min 24px, scales with viewport, max 48px */
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

p {
  /* Readable on all screens */
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.container {
  /* Fluid width */
  width: clamp(300px, 80%, 1200px);
  
  /* Fluid padding */
  padding: clamp(1rem, 5vw, 3rem);
  
  /* Fluid gap */
  gap: clamp(0.5rem, 2vw, 2rem);
}

/* 4vw + 1rem means:
   - On 400px screen: 16px + 16px = 32px
   - On 800px screen: 32px + 16px = 48px
   - But clamped between min and max!
*/
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);