Media queries shorthand syntax

[carlosbaraza]

Is this shorthand syntax a good idea to make quick responsive changes?

.component {
  padding: var(--md-s-10, var(--s-5)); /* Space 5 to mobile. Space 10 to tablet+ */
}

Or is it better to keep the responsive design responsibility separated?

.component {
  padding: var(--s-5);
}

@media (min-width: 768px) {
  .component {
    padding: var(--s-10);
  }
}