YMMV but I find ‘lg:…’ to be much better than ‘@media (min-width: 992px) { … }’ at the expense of repeating ‘lg:’ every class. Since most components don’t need too many responsive classes per breakpoint, this is a net benefit most of the time (and nothing is stopping devs from combining utility classes and custom css with media queries).

Like GP said, this kind of specificity is impossible in inline styles altogether which is relevant when not using CSS-in-JS in React et al.