[PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow

[Rito Rhymes <rito@ritovision.com>]

At widths below 848px, the desktop banner structure is too wide and
creates page-wide horizontal scroll overflow, breaking the layout.

Introduce a mobile breakpoint at 848px (equivalent to 53em at a 16px
base font size), matching the site's existing fixed-width layout scale.

Adjust banner sizing and spacing at this breakpoint while preserving
the existing desktop layout for viewport widths above it.

This patch is intentionally banner-only. The overall mobile layout
will still not render correctly until corresponding main-content and
footer overflow fixes are applied in follow-up commits.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
 korgi/static/css/main.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index 3b09d24..19ee328 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -339,3 +339,25 @@ dt {
 #logo-akamai {
     padding-bottom: 22px;
 }
+
+@media screen and (max-width: 848px) {
+    #banner {
+        width: auto;
+        margin: 0;
+        border-radius: 0;
+        border-left: none;
+        border-right: none;
+        border-top: none;
+    }
+    #banner h1 {
+        font-size: 2em;
+        margin: 0.5em 0;
+    }
+    #tux-gear {
+        width: 4em;
+        height: 5em;
+    }
+    #banner li {
+        padding: 0 0.5em;
+    }
+}
-- 
2.51.0