Fix SCSS syntax error in BentoGrid component

- Fixed :deep() selector usage with parent selectors
- Separated each modifier class into its own :deep() selector
- Resolves build error with Sass compilation

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

components/dashboard/BentoGrid.vue

@@ -87,78 +87,78 @@ const gridClass = computed(() => {
 // Global Bento Item Classes
 :deep(.bento-item) {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
 
 // Size variants
-  &--small {
+:deep(.bento-item--small) {
   grid-column: span 3;
 }
 
-  &--medium {
+:deep(.bento-item--medium) {
   grid-column: span 4;
 }
 
-  &--large {
+:deep(.bento-item--large) {
   grid-column: span 6;
 }
 
-  &--xlarge {
+:deep(.bento-item--xlarge) {
   grid-column: span 8;
 }
 
-  &--full {
+:deep(.bento-item--full) {
   grid-column: span 12;
 }
 
 // Height variants
-  &--tall {
+:deep(.bento-item--tall) {
   grid-row: span 2;
 }
 
-  &--xtall {
+:deep(.bento-item--xtall) {
   grid-row: span 3;
 }
 
 // Responsive overrides
 @media (max-width: 640px) {
-    &--small,
-    &--medium,
-    &--large,
-    &--xlarge {
+  :deep(.bento-item--small),
+  :deep(.bento-item--medium),
+  :deep(.bento-item--large),
+  :deep(.bento-item--xlarge) {
     grid-column: span 12;
   }
 }
 
 @media (min-width: 641px) and (max-width: 768px) {
-    &--small {
+  :deep(.bento-item--small) {
     grid-column: span 3;
   }
   
-    &--medium,
-    &--large {
+  :deep(.bento-item--medium),
+  :deep(.bento-item--large) {
     grid-column: span 6;
   }
   
-    &--xlarge {
+  :deep(.bento-item--xlarge) {
     grid-column: span 6;
   }
 }
 
 @media (min-width: 769px) and (max-width: 1024px) {
-    &--small {
+  :deep(.bento-item--small) {
     grid-column: span 3;
   }
   
-    &--medium {
+  :deep(.bento-item--medium) {
     grid-column: span 4;
   }
   
-    &--large {
+  :deep(.bento-item--large) {
     grid-column: span 6;
   }
   
-    &--xlarge {
+  :deep(.bento-item--xlarge) {
     grid-column: span 8;
   }
 }
-}
 </style>