min() max() clamp()

style.css

.sidebar {
  /* Select smaller of the 2 calculated values
     Narrower screens: 20vw, Wider screens: 300px */
  width: min(20vw, 300px);
}

.make-the-logo-bigger {
  /* Select larger of the 2 calculated values
     Basically clamps the font size to 60px or larger (10vw) */
  font-size: max(60px, 10vw);
}

.ok-lets-not-get-crazy {
  /* Given a min and max value, select the best 
     fit based on the middle argument. (<min>, <value>, <max>)
     The font size will always be between 1rem and 2rem,
     using 10vw until it hits the min or max */
  font-size: clamp(1rem, 10vw, 2rem)
}