Lots of CSS fixing and added new items

src/views/BlessingPowerView.vue

@@ -5,22 +5,16 @@ import SummaryCard from '@/components/BlessingPower/SummaryCard.vue'
 </script>
 
 <template>
-  <v-container fluid>
-    <v-row justify="center">
-      <v-col><StandardItemsCard /></v-col>
-      <v-col><SpecialItemsCard /></v-col>
-    </v-row>
-    <v-row justify="center">
-      <v-col cols="6">
-        <SummaryCard />
-      </v-col>
-    </v-row>
-  </v-container>
+  <v-sheet class="d-flex flex-wrap flex-fill">
+    <StandardItemsCard class="ma-2 align-self-start" />
+    <SpecialItemsCard class="ma-2 align-self-start" />
+    <SummaryCard class="ma-2 align-self-start" />
+  </v-sheet>
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/settings.scss";
+@use '@/styles/settings.scss';
 :deep(tbody) tr:nth-of-type(even) {
-  background-color: map-get(settings.$purple, "lighten-5");
+  background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
 }
 </style>