fix: Apply the same spacing on all devices

src/lib/layout/unauthenticated.svelte

@@ -10,6 +10,7 @@
     import type { Campaign } from '$lib/stores/campaigns';
     import { Typography, Layout, Avatar } from '@appwrite.io/pink-svelte';
     import { getCampaignImageUrl } from '$routes/(public)/card/helpers';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     export const imgLight = LoginLight;
     export const imgDark = LoginDark;
@@ -44,7 +45,7 @@
 
 <main class="grid-1-1 is-full-page" id="main">
     <section
-        class={`u-flex u-flex-vertical ${variation !== 'default' ? 'u-cross-center u-main-center u-height-100-percent u-width-full-line side-bg' : 'side-default'}`}
+        class={`u-flex u-flex-vertical ${variation !== 'default' ? 'u-cross-center u-main-center u-height-100-percent u-width-full-line side-bg' : !$isSmallViewport ? 'side-default' : ''}`}
         style:--url={variation !== 'default'
             ? ''
             : `url(${$app.themeInUse === 'dark' ? imgDark : imgLight})`}>
@@ -159,7 +160,6 @@
                 <div class="u-margin-block-start-24">
                     <slot />
                 </div>
-
                 <ul
                     class="inline-links is-center is-with-sep u-margin-block-start-32"
                     class:u-hide={!$$slots?.links}>
@@ -291,13 +291,6 @@
         }
     }
 
-    /* mobile only: remove top padding toeliminate extra space */
-    @media #{devices.$break1} {
-        .side-default {
-            padding-block-start: 0;
-        }
-    }
-
     /* for smaller screens */
     @media #{devices.$break2open} {
         .side-default {
@@ -368,11 +361,11 @@
     }
 
     .mobile-logo {
-        position: fixed;
-        bottom: 1.25rem;
+        position: absolute;
+        bottom: 20px;
         left: 50%;
-        transform: translateX(-50%);
-        z-index: 10;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
         margin-block-start: 0 !important;
     }
 </style>