Update mixed declarations in scss files to prepare for future breaking changes

[scottqueen-bixal]

Description

https://sass-lang.com/documentation/breaking-changes/mixed-decls/

how to expose the warning:

• uncomment silenceDeprecations in vite.config.mjs file

  css: {
    postcss: poscssConfig,
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
        implementation: sassEmbedded,
        // silenceDeprecations: ['mixed-decls'],
      },
    },
  },

• npm run start

expect to see these warnings:

example:

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

    ╷
121 │ ┌   @media (width >= $desktop) {
122 │ │     font-size: rem(17px);
123 │ │   }
    │ └─── nested rule
... │
138 │     font-size: rem(17px);
    │     ^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ../../../../src/shared/styles/mixins/_index.scss 138:3      list-items()
    ../../../../src/shared/components/Summary/_index.scss 13:7  root stylesheet

• let's use visual regression to ensure that we are not introducing any issues after the refactor

Acceptance Criteria

• all warnings are gone
• no visual style changes are present in regression testing