Set consistent icon sizes and improve responsiveness

Author: Dorazil

frontend/scss/landing.scss

@@ -9,6 +9,9 @@
   color: #2d4739;
   font-family: Arial, sans-serif;
 
+  /* jednotná velikost ikon v .features a .services */
+  --icon-size: 64px;
+
   /* obrázky a typografie – tvrdá ochrana před přetečením */
   img {
     max-width: 100%;
@@ -23,23 +26,47 @@
     flex-direction: column;
     text-align: center;
     margin: 0 auto 30px;
+    gap: 16px; /* mezera mezi textem a obrázkem */
 
-    @media (min-width: 768px) { flex-direction: row; }
+    @media (min-width: 768px) {
+      flex-direction: row;
+      gap: 32px;
+      align-items: center;
+    }
   }
 
   .intro-left,
   .intro-right {
     @media (min-width: 768px) { width: 50%; }
   }
 
-  .intro-left { margin: auto 0; }
+  .intro-left {
+    margin: auto 0;
+    position: relative;
+    z-index: 1; /* zajistí text nad obrázkem */
+  }
+
+  .intro-right {
+    position: relative;
+    z-index: 0;
+
+    img { /* kontrola rozměrů a bez přesahů */
+      width: 100%;
+      height: auto;
+      max-width: 420px;
+      max-height: 40vh;
+      object-fit: contain;
+      display: block;
+      margin: 0 auto;
+    }
+  }
 
   /* jen uvnitř landing – neovlivní zbytek app */
   h1 {
     text-align: center;
     font-size: 2.2rem;
     color: #2d4739;
-    line-height: 66px;
+    line-height: 1.2; /* místo pevného px */
     text-transform: uppercase;
     font-family: skautbold, sans-serif;
 
@@ -55,11 +82,6 @@
     @media (min-width: 768px) { text-align: left; }
   }
 
-  .intro-right img { /* redundance – drží rozměr v gridu */
-    width: 100%;
-    height: auto;
-  }
-
   .intro-buttons {
     max-width: 1000px;
     padding: 20px 0;
@@ -95,11 +117,27 @@
     flex-direction: row;
     gap: 20px;
     text-align: center;
-
+    align-items: center; /* vertikální zarovnání */
     @media (min-width: 768px) { flex: 1 1 250px; flex-direction: unset; }
   }
 
-  .features-item-left { margin: auto 0; }
+  .features-item-left {
+    margin: auto 0;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    min-width: var(--icon-size);
+    min-height: var(--icon-size);
+    flex: 0 0 var(--icon-size);
+    display: grid;
+    place-items: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain; /* stejná výsledná velikost bez deformace */
+      display: block;
+    }
+  }
 
   .features-item h3 {
     font-size: 1.2rem;
@@ -112,9 +150,7 @@
     p { margin: 0; }
   }
 
-  .features img{
-      width: 57px;
-  }
+  /* POZN.: zrušeno původní .features img { width: 57px; } */
 
   .services-container {
     padding: 20px;
@@ -139,10 +175,28 @@
     display: flex;
     flex-direction: row;
     gap: 20px;
+    align-items: center;
 
     @media (min-width: 768px) { flex: 1 1 45%; flex-direction: unset; }
   }
 
+  .services-item-left {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    min-width: var(--icon-size);
+    min-height: var(--icon-size);
+    flex: 0 0 var(--icon-size);
+    display: grid;
+    place-items: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      display: block;
+    }
+  }
+
   .services-item-right {
     margin: auto 0;
 
@@ -188,6 +242,16 @@
       text-decoration: none;
     }
   }
+
+  /* responzivní úpravy pro mobily */
+  @media (max-width: 767.98px) {
+    .features { transform: none; margin-top: 10px; }
+  }
+}
+
+/* menší ikona na velmi malých displejích */
+@media (max-width: 360px) {
+  .landing { --icon-size: 56px; }
 }
 
 /* Dark mode pro landing (izolovaně) */
@@ -238,4 +302,4 @@
       transform: translateY(-3px);
     }
   }
-}
+}