diff --git a/css/global.css b/css/global.css
index b903701..94c7e0b 100644
--- a/css/global.css
+++ b/css/global.css
@@ -818,15 +818,23 @@ a:hover {
 
 
 
+
 /* =========================
- *  1. Layout Anchor
+ *  1. Layout anchor
  = *======================== */
 #websiteContainer {
 position: relative;
 }
 
 /* =========================
- *  2. Base Banner System
+ *  2. BASE SCALE SYSTEM (1920 reference)
+ = *======================== */
+:root {
+  --banner-scale: calc(100vw / 1920);
+}
+
+/* =========================
+ *  3. Base banners
  = *======================== */
 .left_banner,
 .right_banner {
@@ -834,9 +842,12 @@ position: relative;
   top: 50%;
   transform: translateY(-50%);
 
-  width: clamp(140px, 12vw, 320px);
+  /* Base size at 1920px */
+  width: calc(320px * var(--banner-scale));
+  max-width: 380px;
+  min-width: 140px;
+
   aspect-ratio: 383 / 626;
-  height: auto;
 
   background-size: contain;
   background-position: center;
@@ -849,20 +860,20 @@ position: relative;
 }
 
 /* =========================
- *  3. Positioning (980px layout-aware)
+ *  4. Positioning (also scaled from 1920 reference)
  = *======================== */
 .left_banner {
-  left: max(10px, calc((100vw - 980px) / 2 - 200px));
+  left: calc(((100vw - 980px) / 2) - (360px * var(--banner-scale)));
   background-image: url("https://www.veltron.net/images/dragon.png");
 }
 
 .right_banner {
-  right: max(10px, calc((100vw - 980px) / 2 - 200px));
+  right: calc(((100vw - 980px) / 2) - (360px * var(--banner-scale)));
   background-image: url("https://www.veltron.net/images/digimon.png");
 }
 
 /* =========================
- *  4. Float Animation
+ *  5. Float animation
  = *======================== */
 @keyframes float {
   0% {
@@ -877,7 +888,7 @@ position: relative;
 }
 
 /* =========================
- *  5. Tablet Optimization (1280×720, iPads)
+ *  6. Tablet safety fallback
  = *======================== */
 @media (max-width: 1100px) {
   .left_banner,
@@ -896,7 +907,7 @@ position: relative;
 }
 
 /* =========================
- *  6. Mobile Hide (safe collapse)
+ *  7. Mobile hide
  = *======================== */
 @media (max-width: 900px) {
   .decor.left_banner,
@@ -904,12 +915,3 @@ position: relative;
     display: none !important;
   }
 }
-
-/* =========================
- *  7. Extra Small Devices
- = *======================== */
-@media (max-width: 400px) {
-  .decor {
-    display: none !important;
-  }
-}