finish client brief step

src/components/project/cards/Images.vue

@@ -0,0 +1,36 @@
+<template>
+  <article class="card">
+    <hgroup class="order-last">
+      <h3 class="card__title | font-serif | text-lg">
+        <router-link :to="'/' + step.uri" class="link-full">{{
+          step.label
+        }}</router-link>
+      </h3>
+    </hgroup>
+    <DateTime :date="step.modified" />
+    <figure
+      class="card__images"
+      :data-count="images.length"
+      :data-plus="images.length > 3 ? images.length - 3 : undefined"
+    >
+      <template v-for="image in images.slice(0, 3)" :key="image.uuid">
+        <img :src="image.url" :alt="image.alt" />
+      </template>
+    </figure>
+    <!-- <footer
+      v-if="images[0]?.comments?.length > 0"
+      class="order-last | text-sm text-primary font-medium"
+    >
+      {{ images[0].comments.length }} commentaire{{
+        images[0].comments.length > 1 ? "s" : ""
+      }}
+    </footer> -->
+  </article>
+</template>
+<script setup>
+import DateTime from "./DateTime.vue";
+import { usePageStore } from "../../../stores/page";
+
+const { images, step } = defineProps({ images: Array, step: Object });
+const { page } = usePageStore();
+</script>