content sizing

src/components/Layout.vue

@@ -7,7 +7,11 @@
         </client-only>
 
          <suspense>
-             <router-view />
+             <router-view v-slot="{ Component }">
+                 <transition name="quick-fade" mode="out-in">
+                     <component :is="Component" :key="route.path" />
+                 </transition>
+             </router-view>
          </suspense>
     </div>
 </template async>
@@ -16,8 +20,10 @@
 import { computed } from 'vue';
 import { useSeoMeta } from '@unhead/vue'
 import { useStrapiGlobal } from '@/composables/useStrapi'
+import { useRoute } from 'vue-router';
 
 const { data: global } = await useStrapiGlobal()
+const route = useRoute()
 
 const headerCopy = computed(() => global.value?.header_copy)
 const headerDl = computed(() => global.value?.header_dl)

src/components/MosaicModal.vue

@@ -8,7 +8,7 @@
             <div class="window gif">
                 <strapi-media :image="item.image" fit="contain" />
 
-                <strapi-link v-bind="item.image_attribution" />
+                <strapi-link class="h6" v-bind="item.image_attribution" />
             </div>
         </div>
 
@@ -87,6 +87,10 @@ const onClose = () => router.push('/')
                 border-radius: desktop-vw(4px);
                 overflow: hidden;
             }
+            .strapi-content {
+                max-width: columns(6);
+                margin: auto;
+            }
         }
         &.close {
             padding: desktop-vw(9px);