Upgrade to Nuxt 3.12, simplify logic

components/content/Card.vue

@@ -22,7 +22,7 @@ const props = defineProps({
 })
 
 let cardIcon = warningIcon
-let color = 'rgba(255 246 147 / 60%)'
+let color = 'rgb(255 246 147 / 60%)'
 
 switch (props.icon) {
   case 'error':
@@ -44,13 +44,13 @@ switch (props.icon) {
 
   case 'checkmark':
     cardIcon = checkIcon
-    color = 'rgba(69 255 255 / 60%)'
+    color = 'rgb(69 255 255 / 60%)'
 
     break
 
   case 'idea':
     cardIcon = ideaIcon
-    color = 'rgba(255 255 255 / 60%)'
+    color = 'rgb(255 255 255 / 60%)'
 
     break
 
@@ -61,9 +61,7 @@ switch (props.icon) {
 </script>
 
 <template>
-  <div
-    class="tilt d-flex flex-row align-items-center gap-2 mb-0 mb-sm-2 mb-md-4"
-  >
+  <div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
     <img
       draggable="false"
       :src="cardIcon"
@@ -72,7 +70,7 @@ switch (props.icon) {
     />
     <h3 class="mb-0 nobr">{{ props.title }}</h3>
   </div>
-  <div class="box p-4 rounded-4 mb-4">
+  <div class="box p-4 rounded-xl mb-4">
     <slot />
   </div>
 </template>