CSS function clamp()

clamp() - a middle value within a range of values
between a defined minimum bound and a maximum
bound.

• If the expression value is between min and max,
  the browser uses the expression result as the
  property value.
• If the expression value is less than min, the
  browser uses min as the property value.
• If the expression value is greater than max, the
  browser uses max as the property value.

property: clamp(min, expression, max);  

article {
width: clamp(450px, calc(100% - 15rem), 1200px);
}

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);