feat: adjust Textflow styles

app/app.vue

@@ -47,7 +47,7 @@ h6 {
 }
 
 img.default {
-  @apply rounded-md border border-gray-200 dark:border-gray-800;
+  @apply rounded-lg border border-gray-200 dark:border-gray-800;
 }
 
 .icon {

app/components/content/ImageCaption.vue

@@ -3,14 +3,27 @@ defineProps<{
   src?: string
   alt?: string
   caption?: string
+  imgClass?: string
 }>()
 </script>
 
 <template>
   <figure>
-    <NuxtImg placeholder :src="src" :alt="alt" class="mb-1 border border-gray-200 dark:border-gray-800 w-96 lg:w-[28rem] rounded" />
+    <slot name="image">
+      <NuxtImg
+        placeholder
+        :src="src"
+        :alt="alt"
+        class="mb-1 border border-gray-200 dark:border-gray-800 w-96 lg:w-[28rem] default"
+        :class="imgClass"
+      />
+    </slot>
+
+    <!-- Slot for customizable caption, defaults to the caption prop -->
     <figcaption class="text-center">
-      {{ caption }}
+      <slot name="caption">
+        {{ caption }}
+      </slot>
     </figcaption>
   </figure>
 </template>

app/components/content/TextFlow.vue

@@ -9,18 +9,18 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="md:overflow-auto my-4 sm:my-6 lg:my-8" :class="props.side">
+  <div class="md:overflow-x-auto py-4 sm:py-6 lg:py-8" :class="props.side">
     <slot />
   </div>
 </template>
 
 <style>
 .left > figure {
-  @apply md:float-left lg:mr-16 md:mr-8 md:my-5;
+  @apply md:float-left md:mr-8 lg:mr-16 my-6;
 }
 
 .right > figure {
-  @apply md:float-right lg:ml-16 md:ml-8 md:my-5;
+  @apply md:float-right md:ml-8 lg:ml-16 my-6;
 }
 
 .left > figure > img,