Deprecated sass notation when using more recent gems than GitHub page

[sylhare]

Example in the build gem workflow here:

    ╷
7  │ ┌   @media screen and (max-width: $sm-break) {
8  │ │     overflow-x: auto;
9  │ │   }
   │ └─── nested rule
10 │     padding-bottom: 3px;
   │     ^^^^^^^^^^^^^^^^^^^ declaration
   ╵
    /home/runner/work/Type-on-Strap/Type-on-Strap/_sass/external/_katex.scss 10:3  @import
    type-on-strap.scss 12:9                                                        @import
    /home/runner/work/Type-on-Strap/Type-on-Strap/assets/css/main.scss 1:9         root stylesheet
DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

This is linked to custom sass styling for Katex, let's try to fix it without impacting the theme running with the GitHub page gem which uses an older version for sass.