update a lot of change since a while

design-system/primitives/DsMedia.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="ds-media" :class="`ds-media--${ratio}`">
+    <img
+      class="ds-media__img"
+      :src="src"
+      :alt="alt"
+      loading="lazy"
+      decoding="async"
+    />
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    src: { type: String, required: true },
+    alt: { type: String, default: '' },
+    ratio: { type: String, default: '' }, // 16-9 / 4-3 / square
+  })
+</script>
+
+<style lang="scss">
+.ds-media {
+  width: 100%;
+  background: rgba(0,0,0,0.04);
+  overflow: hidden;
+  &--16-9 { aspect-ratio: 16 / 9; }
+  &--4-3 { aspect-ratio: 4 / 3; }
+  &--square { aspect-ratio: 1 / 1; }
+
+  .ds-media__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+</style>