detail page port

components/slices/FullBleedMedia.vue

@@ -0,0 +1,61 @@
+<template>
+    <section
+        :class="[
+            'slices-full-bleed-media',
+            { diptych: items.length === 2, inset: slice.primary.inset },
+        ]"
+        :data-slice-type="slice.slice_type"
+        :data-slice-variation="slice.variation"
+    >
+        <prismic-media v-for="item in items" :image="item.image" />
+    </section>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import PrismicMedia from '@/components/prismic/Media.vue'
+
+const props = defineProps({
+    slice: Object,
+})
+
+const items = computed(() => props.slice?.primary?.items || [])
+</script>
+
+<style lang="scss">
+.slices-full-bleed-media {
+    margin-top: desktop-vw(100px);
+    margin-bottom: desktop-vw(100px);
+    display: flex;
+    width: 100%;
+
+    .prismic-media {
+        flex: 1;
+    }
+
+    &.diptych {
+        .prismic-media {
+            border: 1px solid var(--black);
+        }
+    }
+    &.inset {
+        padding: 0 desktop-vw(16px);
+        gap: desktop-vw(26px);
+
+        .prismic-media {
+            border: none;
+        }
+    }
+
+    @include mobile {
+        margin-top: mobile-vw(100px);
+        margin-bottom: mobile-vw(100px);
+        flex-direction: column;
+
+        &.inset {
+            padding: 0 var(--layout-margin);
+            gap: mobile-vw(29px);
+        }
+    }
+}
+</style>