Better variables in media queries

There is a better way to work with CSS variables and media queries. Instead of changing them scattered out the code, prepare the variables first and use them later.

This way the variables becomes dynamic depending on the viewport size.

:root {
  --padding: 1rem;
}

@media screen and (min-width: 600px) {
  :root {
    --padding: 2rem;
  }
}

div {
  padding: var(--padding);
}

Click "Full page" and then resize your browser window.