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
+// Size variants
-  &--small {
+:deep(.bento-item--small) {
+  grid-column: span 3;
+}
+
+:deep(.bento-item--medium) {
+  grid-column: span 4;
+}
+
+:deep(.bento-item--large) {
+  grid-column: span 6;
+}
+
+:deep(.bento-item--xlarge) {
+  grid-column: span 8;
+}
+
+:deep(.bento-item--full) {
+  grid-column: span 12;
+}
+
+// Height variants
+:deep(.bento-item--tall) {
+  grid-row: span 2;
+}
+
+:deep(.bento-item--xtall) {
+  grid-row: span 3;
+}
+
+// Responsive overrides
+@media (max-width: 640px) {
+  :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) {
+  :deep(.bento-item--small) {
     grid-column: span 3;
   }
   
-  &--medium {
+  :deep(.bento-item--medium),
-    grid-column: span 4;
+  :deep(.bento-item--large) {
-  }
-  
-  &--large {
     grid-column: span 6;
   }
   
-  &--xlarge {
+  :deep(.bento-item--xlarge) {
+    grid-column: span 6;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  :deep(.bento-item--small) {
+    grid-column: span 3;
+  }
+  
+  :deep(.bento-item--medium) {
+    grid-column: span 4;
+  }
+  
+  :deep(.bento-item--large) {
+    grid-column: span 6;
+  }
+  
+  :deep(.bento-item--xlarge) {
     grid-column: span 8;
   }
-  
-  &--full {
-    grid-column: span 12;
-  }
-  
-  // Height variants
-  &--tall {
-    grid-row: span 2;
-  }
-  
-  &--xtall {
-    grid-row: span 3;
-  }
-  
-  // Responsive overrides
-  @media (max-width: 640px) {
-    &--small,
-    &--medium,
-    &--large,
-    &--xlarge {
-      grid-column: span 12;
-    }
-  }
-  
-  @media (min-width: 641px) and (max-width: 768px) {
-    &--small {
-      grid-column: span 3;
-    }
-    
-    &--medium,
-    &--large {
-      grid-column: span 6;
-    }
-    
-    &--xlarge {
-      grid-column: span 6;
-    }
-  }
-  
-  @media (min-width: 769px) and (max-width: 1024px) {
-    &--small {
-      grid-column: span 3;
-    }
-    
-    &--medium {
-      grid-column: span 4;
-    }
-    
-    &--large {
-      grid-column: span 6;
-    }
-    
-    &--xlarge {
-      grid-column: span 8;
-    }
-  }
 }
 </style>