Increase element padding as browser width decreases

Question

Default behavior for padding in CSS behaves as expected and will not increase when the browser width is decreased. In the snippet below a percent based value for padding will decrease as width decreases like expected.

html {
  background-color: #f8f8f8;
  font-family: Arial;
  text-transform: uppercase;
}
h1 {
  display: inline-block;
  background-color: #fe0;
  padding: 4%;
}

<h1>Highlighted Text</h1>

I've learned some interesting CSS techniques using calc and vw, vh, etc. values to do some interesting non-standard behavior.

Can I reverse default behavior and increase padding while width decreases ( Or at least create an illusion of this ) using CSS?

EDIT: Also I'm aware of media-queries but I want this transition to be buttery smooth like how default padding works.

Answer 1

Here you go :)

html {
  background-color: #f8f8f8;
  font-family: Arial;
  text-transform: uppercase;
}
h1 {
  display: inline-block;
  background-color: #fe0;
  padding: calc(50px - 4%);
}

<h1>Highlighted Text</h1>