Docker server has responsiveness now

docker/views/css/components/hero.css

@@ -23,8 +23,13 @@
 .hero-vignette {
     position: absolute;
     inset: 0;
-    background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
-    linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
+    background:
+        radial-gradient(
+            circle at center,
+            transparent 0%,
+            var(--color-bg-base) 120%
+        ),
+        linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
     z-index: 1;
 }
 
@@ -106,8 +111,18 @@
 .hero-overlay {
     position: absolute;
     inset: 0;
-    background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
-    linear-gradient(to top, var(--color-bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
+    background:
+        radial-gradient(
+            circle at center,
+            transparent 0%,
+            var(--color-bg-base) 120%
+        ),
+        linear-gradient(
+            to top,
+            var(--color-bg-base) 10%,
+            rgba(9, 9, 11, 0.8) 25%,
+            transparent 60%
+        );
     z-index: 1;
 }
 
@@ -117,4 +132,87 @@
     padding: 0.2rem 0.8rem;
     border-radius: 6px;
     border: 1px solid rgba(34, 197, 94, 0.2);
-}
+}
+
+@media (max-width: 768px) {
+    .hero-wrapper {
+        height: auto;
+        min-height: 85vh;
+    }
+
+    .hero-content {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        padding: 6rem 1.5rem 3rem 1.5rem;
+        gap: 2rem;
+    }
+
+    .hero-poster-card {
+        width: 150px;
+        height: 225px;
+
+        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
+        border: 2px solid rgba(255, 255, 255, 0.15);
+        margin-bottom: 0.5rem;
+    }
+
+    .hero-text {
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+    .hero-title {
+        font-size: 2.2rem;
+        line-height: 1.1;
+        margin-bottom: 0.8rem;
+
+        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
+    }
+
+    .hero-meta {
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.8rem;
+        font-size: 0.9rem;
+    }
+
+    .hero-desc {
+        font-size: 1rem;
+        line-height: 1.5;
+
+        -webkit-line-clamp: 3;
+        max-width: 100%;
+        padding: 0 0.5rem;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+        width: 100%;
+        gap: 1rem;
+    }
+
+    .hero-buttons .btn-primary,
+    .hero-buttons .btn-blur {
+        width: 100%;
+        justify-content: center;
+        padding: 1rem;
+    }
+
+    .hero-overlay {
+        background:
+            radial-gradient(
+                circle at center,
+                transparent 0%,
+                var(--color-bg-base) 140%
+            ),
+            linear-gradient(
+                to top,
+                var(--color-bg-base) 15%,
+                rgba(0, 0, 0, 0.8) 40%,
+                rgba(0, 0, 0, 0.6) 100%
+            );
+    }
+}