I'd like to distinguish between @use+@import directives and the rest of at-rules.

In v5, I had a rule to keep at-rules at the bottom.

So the order was like

.main {
    display: grid;
    ...
    @include media-breakpoint-down(lg) {
        grid-template-areas: "header" "content";
        grid-template-columns: 100%;
    }
}

however, since v6 it also takes all @import statements and put's them at the end of file which does not play well. The @import usually imports something that's used afterwards so it cannot be at the end of the file.