The issue is likely caused by the order of variable overrides. Vuetify's styles are being loaded before your custom overrides. To fix this:

Ensure Custom SASS is Imported After Vuetify: Make sure your main.scss file is loaded after Vuetify's styles in your project.

Use Proper Vuetify SASS Overrides: Ensure the @use directive for Vuetify includes your custom variables before Vuetify is applied:

@use "vuetify/styles" with ( $grid-breakpoints: ( "md": 960px, "lg": 960px, "xl": 960px, "xxl": 960px ), $container-max-widths: ( 'md': 960px, 'lg': 960px, 'xl': 960px, 'xxl': 960px ) ); Double-Check Variable Scoping: Make sure your overrides are not being overridden elsewhere in your project.