ods and foro pages

components/TextWithImage.vue

@@ -6,20 +6,18 @@
       'bg-background-light': bgColor === 'light'
     }">
     <div 
-      class="flex flex-col lg:flex-row"
+      class="flex justify-between"
       :class="{
-        'lg:flex-row': position === 'left',
-        'lg:flex-row-reverse': position === 'right',
+        'flex-col lg:flex-row gap-4': position === 'left',
+        'flex-col lg:flex-row-reverse': position === 'right',
         'items-center gap-12': image.display === 'circle',
-        'items-center lg:items-start gap-8': image.display === 'normal' && position === 'left',
-        'items-center lg:items-start justify-between gap-8': image.display === 'normal' && position === 'right'
       }">
 
       <div 
         v-if="image"
         :class="{
           'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
-          'h-fit lg:h-20.9 w-full lg:w-fit': image.display === 'normal'
+          'h-fit w-full lg:w-auto': image.display === 'normal'
         }">
         <img 
           :src="`/img/${image.src}`"
@@ -45,7 +43,12 @@
           </li>
         </ul>
         <ul v-if="list" class="flex flex-col gap-4">
-          <li v-for="(item, index) in list" :key="`item-list-${id}-${index}`">
+          <li
+            v-for="(item, index) in list" 
+            :key="`item-list-${id}-${index}`"
+            :class="{
+              'list-disc ml-6': hasBullets,
+            }">
             <p class="text-lg" v-html="item"></p>
           </li>
         </ul>
@@ -73,6 +76,10 @@ export default {
       type: Array,
       default: () => []
     },
+    hasBullets: {
+      type: Boolean,
+      default: false
+    },
     position: {
       type: String,
       default: 'left'
@@ -91,10 +98,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.custom-clip {
-  clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
-}
-</style>
+</script>