From 9d7ecd3dd1572a3db0ff5fcc67207becb1ca8e02 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Thu, 19 Feb 2026 02:46:16 +0100
Subject: [PATCH] Adjust carousel navigation arrows and spacing

---
 components/ImageSlider.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/ImageSlider.vue b/components/ImageSlider.vue
index 8db1c93..4f4f930 100644
--- a/components/ImageSlider.vue
+++ b/components/ImageSlider.vue
@@ -16,17 +16,16 @@
       :style="{
         '--swiper-navigation-color': 'rgb(71 85 105)',
         '--swiper-pagination-color': 'rgb(71 85 105)',
-        '--swiper-pagination-bottom': 'auto',
-        '--swiper-pagination-top': '1rem',
-        '--swiper-navigation-top-offset': '5rem'
+        '--swiper-pagination-top': '0',
+        '--swiper-navigation-top-offset': '4rem'
       }"
       :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
-      class="h-full w-full"
+      class="h-full w-full px-12 pt-16"
     >
 
-      <SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-center !justify-center !py-4 !bg-zinc-100">
+      <SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-start !justify-center !py-8 !bg-zinc-100">
           <img :src="'/' + bucket + '/' + image.image" 
-          style="max-width: 100%; max-height: calc(85vh - 40px); object-fit: contain;"/>
+          style="max-width: calc(100% - 80px); max-height: calc(85vh - 160px); object-fit: contain;"/>
       </SwiperSlide>
     </Swiper>
   </template>