last changes

frontend/src/lib/components/widgets/persons.svelte

@@ -17,11 +17,20 @@
             }}"
         >
             <div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
-                {#if hover == i}
-                    <img src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}" alt="img" />
-                {:else}
-                    <img src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}" alt="img" />
-                {/if}
+                <!-- Initial Image -->
+                <img
+                    class="initial"
+                    src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}"
+                    alt="img"
+                    style="opacity: {hover == i ? 0 : 1}"
+                />
+                <!-- Hover Image -->
+                <img
+                    class="hover"
+                    src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}"
+                    alt="img"
+                    style="opacity: {hover == i ? 1 : 0}"
+                />
             </div>
             <div class="text">
                 {pp.name}
@@ -36,19 +45,30 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
-        gap: 80px;
+        gap: 30px;
+        @media @tablet {
+            gap: 80px;
+        }
         .person {
             cursor: pointer;
-            margin: 40px 0px;
+            @media @tablet {
+                margin: 40px 0px;
+            }
             display: flex;
             flex-direction: column;
             .image {
                 width: 290px;
                 height: 368px;
+                position: relative;
+
                 img {
                     width: 100%;
                     height: 100%;
                     object-fit: contain;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    transition: opacity 0.3s; 
                 }
             }
             .text {