From a8768f7ac3bfd8f6a949683735fd6d5ef4125b1f Mon Sep 17 00:00:00 2001
From: MoxiFoxi411 <matic.ivesic@gmail.com>
Date: Wed, 29 Oct 2025 14:33:20 +0100
Subject: [PATCH] Fixed image aspect ratio on phone

---
 src/lib/Header.svelte      | 14 --------------
 src/lib/Service.svelte     |  8 ++++++++
 src/lib/ZoomInImage.svelte | 11 +++++++++--
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 5ccabf4..b79ba31 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -18,25 +18,11 @@
         z-index: 1;
     }
 
-
-    .blur-background {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        background-color: rgba(15, 15, 16, 0.8);
-    }
-
     div>img{
         padding: 1em;
         width: 15em;
         z-index: 1;
     }
-
-    
-
 @media (min-width: 900px){
 
     :global(.header-contact){
diff --git a/src/lib/Service.svelte b/src/lib/Service.svelte
index 56263ea..5f9b473 100644
--- a/src/lib/Service.svelte
+++ b/src/lib/Service.svelte
@@ -12,6 +12,7 @@ import ZoomInImage from '$lib/ZoomInImage.svelte'
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 }
 
 .service-content{
@@ -19,6 +20,7 @@ import ZoomInImage from '$lib/ZoomInImage.svelte'
     height: 100%;
     display: flex;
     flex-direction: column-reverse;
+    align-items: center;
     gap: 2em;
 }
 
@@ -36,10 +38,16 @@ import ZoomInImage from '$lib/ZoomInImage.svelte'
     text-transform: uppercase;
 }
 
+h2{
+    text-align: center;
+    width: 100%;
+}
+
 @media (min-width: 900px){
 
     .service-content{
         flex-direction: row;
+        align-items: start;
     }
 
     .image-right{
diff --git a/src/lib/ZoomInImage.svelte b/src/lib/ZoomInImage.svelte
index d3c704e..9e821e3 100644
--- a/src/lib/ZoomInImage.svelte
+++ b/src/lib/ZoomInImage.svelte
@@ -11,9 +11,9 @@
     justify-content: center;
     align-items: center;
     border-radius: 2em;
-    width: 100%;
+    width: 80%;
     height: 0;
-    padding-top: 35%;
+    padding-top: 60%;
     overflow: hidden;
     z-index: 0;
 }
@@ -31,6 +31,13 @@
     transform: scale(1.1);
 }
 
+@media (min-width: 900px){
+
+    .image{
+        padding-top: 33%;
+    }
+}
+
 </style>
 
 <div class="image">