diff --git a/web/src/components/photos/carousel.astro b/web/src/components/photos/carousel.astro
index 01a5b5e..13572fa 100644
--- a/web/src/components/photos/carousel.astro
+++ b/web/src/components/photos/carousel.astro
@@ -70,4 +70,4 @@ const getImageLink = async (record: any) => {
 <!-- Hidden element to pass server data to client -->
     <div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
     
-    <img id="carousel-img" class="rounded-lg w-full max-h-screen object-contain" src={ pb.files.getURL(photos[0], photos[0].image) } />
\ No newline at end of file
+    <img id="carousel-img" class="rounded-lg w-full h-[calc(100vh-7rem)] object-contain" src={ pb.files.getURL(photos[0], photos[0].image) } />
\ No newline at end of file