refactor: solve SASS warnings (#581)

# Motivation

We receive some warnings from SASS new version:

```bash
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 `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/lib/styles/mixins/_layout.scss
23 │     box-sizing: border-box;
   │     ^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/lib/styles/mixins/_media.scss
17 │ ┌     @media (min-width: $breakpoint-medium) {
18 │ │       @content;
19 │ │     }
   │ └─── nested rule
   ╵
    src/lib/styles/mixins/_layout.scss 23:3                          content()
    src/lib/components/SplitContent.svelte.vite-preprocess.scss 9:5  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 `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/lib/styles/mixins/_layout.scss
25 │     padding-top: 0;
   │     ^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/lib/styles/mixins/_media.scss
17 │ ┌     @media (min-width: $breakpoint-medium) {
18 │ │       @content;
19 │ │     }
   │ └─── nested rule
   ╵
    src/lib/styles/mixins/_layout.scss 25:3                          content()
    src/lib/components/SplitContent.svelte.vite-preprocess.scss 9:5  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 `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/lib/styles/mixins/_layout.scss
30 │     padding-bottom: var(--layout-bottom-offset, 0);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/lib/styles/mixins/_media.scss
17 │ ┌     @media (min-width: $breakpoint-medium) {
18 │ │       @content;
19 │ │     }
   │ └─── nested rule
   ╵
    src/lib/styles/mixins/_layout.scss 30:3                          content()
    src/lib/components/SplitContent.svelte.vite-preprocess.scss 9:5  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 `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/lib/styles/mixins/_layout.scss
33 │     min-width: calc([100](https://github.com/dfinity/gix-components/actions/runs/13236327756/job/36941848570#step:3:101)vw - var(--padding-2x));
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/lib/styles/mixins/_media.scss
17 │ ┌     @media (min-width: $breakpoint-medium) {
18 │ │       @content;
19 │ │     }
   │ └─── nested rule
   ╵
    src/lib/styles/mixins/_layout.scss 33:3                          content()
    src/lib/components/SplitContent.svelte.vite-preprocess.scss 9:5  root stylesheet
```

# Changes

Move the nested rule below.

# Screenshots

Current tests will suffice.

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: AntonioVentilii

src/lib/styles/mixins/_layout.scss

@@ -15,11 +15,6 @@
 
   overflow: hidden;
 
-  @include media.min-width(medium) {
-    border-radius: var(--border-radius-2x);
-    margin: var(--content-margin);
-  }
-
   box-sizing: border-box;
 
   padding-top: 0;
@@ -32,6 +27,11 @@
   // On small screen the menu pushes the content
   min-width: calc(100vw - var(--padding-2x));
 
+  @include media.min-width(medium) {
+    border-radius: var(--border-radius-2x);
+    margin: var(--content-margin);
+  }
+
   @include media.min-width(large) {
     min-width: auto;
   }