diff --git a/src/components/public/HeroBanner.tsx b/src/components/public/HeroBanner.tsx
index 536437d..b61b2c2 100644
--- a/src/components/public/HeroBanner.tsx
+++ b/src/components/public/HeroBanner.tsx
@@ -288,7 +288,7 @@ export function HeroBanner({
           return (
             <div
               key={i}
-              className="absolute inset-0"
+              className="absolute inset-0 overflow-hidden"
               style={{
                 opacity: isActive ? 1 : isPrev ? 0 : 0,
                 transform: isActive
@@ -307,7 +307,7 @@ export function HeroBanner({
                 src={s.image}
                 alt=""
                 draggable={false}
-                className="h-full w-full object-cover"
+                className="absolute left-1/2 top-0 h-full w-auto max-w-none -translate-x-1/2"
               />
             </div>
           );
@@ -321,7 +321,7 @@ export function HeroBanner({
         {/* Desktop spacer: 21:9 (9/21), capped height for ultrawide banners */}
         <div
           className="pointer-events-none relative z-10 hidden w-full sm:block"
-          style={{ paddingBottom: "min(42.86%, 480px)" }}
+          style={{ paddingBottom: "min(50%, 810px)" }}
         />
 
         {/* Multi-layer gradient overlays */}