diff --git a/index.html b/index.html
index b9fd1c6..67f427d 100644
--- a/index.html
+++ b/index.html
@@ -16,12 +16,62 @@
 <!-- Kritični in razdeljeni CSS -->
 <style>
     body { background-color: #fdfdfd; }
-    .slider { margin: 2rem auto; padding: 2rem; max-width: 1200px; }
+    .slider {
+      position: relative;
+      max-width: 1200px;
+      margin: 2rem auto;
+      background: #ffffff;
+      padding: 2rem;
+      border-radius: 1rem;
+      overflow: hidden;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    }
     .slide { display: none; }
-    .slide.active { display: block; }
-    .slide-content { display: flex; flex-direction: column; gap: 2rem; }
-    @media (min-width: 769px) {
-      .slide-content { flex-direction: row; align-items: center; }
+    .slide.active { display: block; animation: fadeIn 0.5s ease-in-out; }
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    .slide-content {
+      display: flex;
+      align-items: center;
+      gap: 2.5rem;
+    }
+    .slide-image { flex: 1 1 50%; }
+    .slide-image img {
+      width: 100%;
+      height: auto;
+      display: block;
+      border-radius: 0.5rem;
+    }
+    .slide-text { flex: 1 1 50%; }
+    .slide-portrait {
+      float: right;
+      width: 250px;
+      height: 250px;
+      margin: 0 0 2rem 2rem;
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    }
+    .slide-portrait img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    @media (max-width: 768px) {
+      .slide-content {
+        flex-direction: column;
+        text-align: center;
+        gap: 1.5rem;
+      }
+      .slide-portrait {
+        float: none;
+        margin: 0 auto 2rem auto;
+        width: 200px;
+        height: 200px;
+      }
     }
   </style>
   <link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>