list and emphasize

components/dynamicZone/ColumnImageText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-row gap-4">
+  <div class="flex flex-col md:flex-row gap-4">
     <NuxtPicture
       loading="lazy"
       class="w-1/2 min-w-[50%] h-fit object-cover object-center"

components/dynamicZone/DualColumnText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-row gap-4">
+  <div class="flex flex-col md:flex-row gap-4">
     <FieldContent :data="data?.left_side" />
     <FieldContent :data="data?.right_side" />
   </div>

components/dynamicZone/EmphasiseArticle.vue

@@ -1,5 +1,14 @@
 <template>
-  <p>{{ data }}</p>
+  <div class="w-full flex flex-col justify-center">
+    <h1 class="text-center">{{ data?.titel }}</h1>
+    <p class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
+    <br />
+    <div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
+      <div v-for="item in data?.articles" :key="item.slug" class="contents">
+        <BaseListImageItem :data="item" :allow-navigation="true" :url-overwrite="data?.base_url" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

components/dynamicZone/FullImage.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtPicture
     loading="lazy"
-    class="w-1/2 min-w-[50%] h-fit object-cover object-center mx-auto"
+    class="w-full md:w-1/2 md:min-w-[50%] h-fit object-cover object-center mx-auto"
     :src="baseUrl + data?.image.url"
     :imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
   />

components/dynamicZone/Gallery.vue

@@ -3,9 +3,9 @@
     <NuxtPicture
       v-for="img in data?.images"
       loading="lazy"
-      class="w-fit h-48 object-cover object-center"
+      class="w-full h-fit md:w-fit md:h-48 object-cover object-center"
       :src="baseUrl + img.url"
-      :imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
   </div>
 </template>