Is it possible to somehow group styles by media queries in Magento2?

Question

css

Given:
Magento2 with the default theme blank, you still have to write styles in less and compile to css with regular Magento tools, that is, static-content: deploy etc.
Regularly, css is minimized at the output, but what I didn’t find is the possibility of how to organize this business by media queries, following the group-css-media-queries example .
There are no problems in the usual layout - this plugin is in the gulp version, there is for webpack. There is experience with gulp and Magento sass theme, all this is easily implemented there.
However, due to the decision of the team, you mainly have to work only with the official magento, and there, as I already said, only less ...
Therefore, you have to strictly watch the file structure in less, i.e. keep track of which media queries are first, which are next, which are last. A colleague marks up the less file in advance so that there is no error in this order.
I don't really like it, because in fact the original less is bloated. As an example, this code

.page-wrapper {
  .nav-sections {
    .ves-megamenu {
      .navigation {
        ul {
          :nth-child(-n+10) {
            a {
              white-space: pre-wrap;
              span {
                line-height: 1.5em;
                vertical-align: middle;
                text-align: center;
                @media only screen and (max-width: 1023px) {
                font-size: 11px;
                }
              }
            }
          }
        }
      }
    }
  }
}

you will either have to write the entire chain twice, for the sake of one selector in one media query, or spit and write stupidly right away in css, as the above-mentioned colleague does.
Perhaps someone has come across a solution for magento to group styles?