diff --git a/css/style.css b/css/style.css
index a083094..c754763 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4209,6 +4209,25 @@ footer {
   line-height: 1.85
 }
 
+/* Načini posredovanja grid */
+.mediation-ways-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 3rem;
+}
+
+.mediation-way-item {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 768px) {
+  .mediation-ways-grid {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+}
+
 .mediation-detail-image {
   position: relative;
   border-radius: 28px;
diff --git a/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html b/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html
index 175d592..713e5a5 100644
--- a/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html
+++ b/skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html
@@ -168,39 +168,35 @@
             <div class="container" style="max-width: 1200px; margin: 0 auto;">
                 <h2 style="text-align: center; margin-bottom: 3rem;" data-aos="fade-up">Načini posredovanja</h2>
                 
-                <!-- Naslovi in opisi v isti vrsti -->
-                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-bottom: 2rem;">
-                    <!-- Individualno -->
-                    <div id="individualno" class="mediation-detail-text" data-aos="fade-up">
-                        <h2>Individualno</h2>
-                        <p>Primerno za <strong>posamezne primere</strong>, kjer gre za <strong>enega učenca ali eno družino</strong>.</p>
-                        <p style="margin-top: 1.5rem;">📍 <em>Primer: starši ne razumejo vzgojnih ali šolskih pričakovanj, zato posrednik pomaga razjasniti postopke in pravila.</em></p>
+                <div class="mediation-ways-grid">
+                    <!-- Individualno - besedilo in slika skupaj -->
+                    <div class="mediation-way-item">
+                        <div id="individualno" class="mediation-detail-text" data-aos="fade-up">
+                            <h2>Individualno</h2>
+                            <p>Primerno za <strong>posamezne primere</strong>, kjer gre za <strong>enega učenca ali eno družino</strong>.</p>
+                            <p style="margin-top: 1.5rem;">📍 <em>Primer: starši ne razumejo vzgojnih ali šolskih pričakovanj, zato posrednik pomaga razjasniti postopke in pravila.</em></p>
+                        </div>
+                        <div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px; margin-top: 2rem;">
+                            <picture>
+                                <source srcset="/assets/images/individualno.webp" type="image/webp">
+                                <img src="/assets/images/individualno.webp" alt="Individualno medkulturno posredovanje" loading="lazy" decoding="async" width="1248" height="832" style="width: 100%; height: 100%; object-fit: cover;">
+                            </picture>
+                        </div>
                     </div>
 
-                    <!-- Skupinsko -->
-                    <div id="skupinsko" class="mediation-detail-text" data-aos="fade-up">
-                        <h2>Skupinsko</h2>
-                        <p>Primerno za <strong>več udeležencev ali skupine</strong> – <strong>učitelje, razrednike, več družin</strong>.</p>
-                        <p style="margin-top: 1.5rem;">📍 <em>Primer: skupni sestanek s svetovalno službo, razrednikom in starši priseljencev za izboljšanje sodelovanja in razumevanja.</em></p>
-                    </div>
-                </div>
-                
-                <!-- Sliki v isti vrsti -->
-                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem;">
-                    <!-- Slika Individualno -->
-                    <div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px;">
-                        <picture>
-                            <source srcset="/assets/images/individualno.webp" type="image/webp">
-                            <img src="/assets/images/individualno.webp" alt="Individualno medkulturno posredovanje" loading="lazy" decoding="async" width="1248" height="832" style="width: 100%; height: 100%; object-fit: cover;">
-                        </picture>
-                    </div>
-
-                    <!-- Slika Skupinsko -->
-                    <div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px;">
-                        <picture>
-                            <source srcset="/assets/images/skupinsko.webp" type="image/webp">
-                            <img src="/assets/images/skupinsko.webp" alt="Skupinsko medkulturno posredovanje" loading="lazy" decoding="async" width="1170" height="777" style="width: 100%; height: 100%; object-fit: cover;">
-                        </picture>
+                    <!-- Skupinsko - besedilo in slika skupaj -->
+                    <div class="mediation-way-item">
+                        <div id="skupinsko" class="mediation-detail-text" data-aos="fade-up">
+                            <h2>Skupinsko</h2>
+                            <p>Primerno za <strong>več udeležencev ali skupine</strong> – <strong>učitelje, razrednike, več družin</strong>.</p>
+                            <p style="margin-top: 1.5rem;">📍 <em>Primer: skupni sestanek s svetovalno službo, razrednikom in starši priseljencev za izboljšanje sodelovanja in razumevanja.</em></p>
+                        </div>
+                        <div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="100" style="aspect-ratio: 3/2; overflow: hidden; border-radius: 12px; margin-top: 2rem;">
+                            <picture>
+                                <source srcset="/assets/images/skupinsko.webp" type="image/webp">
+                                <img src="/assets/images/skupinsko.webp" alt="Skupinsko medkulturno posredovanje" loading="lazy" decoding="async" width="1170" height="777" style="width: 100%; height: 100%; object-fit: cover;">
+                            </picture>
+                        </div>
                     </div>
                 </div>
             </div>