diff --git a/html/style.css b/html/style.css
index 312c590..f51109a 100644
--- a/html/style.css
+++ b/html/style.css
@@ -321,15 +321,11 @@ img.logo {
 
   .main {
     grid-template-rows: 1fr;
-    #grid-template-columns: minmax(180px, 1fr) auto;
-    #grid-template-columns: minmax(300px, auto) min(calc(100vw - 360px), calc(100vh * 16 / 9));
-    #grid-template-columns: minmax(300px, auto) 1fr;
-    #grid-template-columns: 1fr auto;
-    grid-template-columns: minmax(300px, 1fr) auto;
+    grid-template-columns: minmax(300px, 1fr) min(calc(100vh * 16 / 9), calc(100% - 300px - 4px));
     grid-template-areas: "conditions video";
     border-radius: var(--r-lg) 0 0 var(--r-lg);
-    justify-content: center;
-    height: 100%;
+    height: min(calc(100dvh - 3.5vh), calc((100vw - 306px - 1vh) * 9 / 16));
+    align-self: center;
   }
 
   /* Single column — everything stacks top-to-bottom */
@@ -345,6 +341,7 @@ img.logo {
     max-width: 420px;
     width: 100%;
     margin: 0 auto;
+    min-width: 0;
   }
 
   .current {
@@ -357,26 +354,9 @@ img.logo {
 
   .video {
     height: 100%;
-    aspect-ratio: 16 / 9;
-    max-height: 100%;
     align-self: center;
     justify-self: end;
     overflow: hidden;
-    max-width: calc(100vw - 300px);
-    #max-width: 100%;
-    #width: 100%;
-    #height: min(100%, calc((100vw - 300px) * 9 / 16));
-    #overflow: hidden;
-    #display: flex;
-    #align-items: center;
-    #align-self: center;
-    #justify-self: end;
-    #height: 100%;
-    #width: 100%;
-    #max-width: calc(100vw - 0px);
-    #aspect-ratio: 16 / 9;
-    #max-height: 100%;
-    #width: auto;
   }
   
   .video img {
@@ -384,7 +364,6 @@ img.logo {
     height: 100%;
     object-fit: contain;
     display: block;
-    padding-right: 4px;
   }
 
   p.header       { grid-column: 1; grid-row: 1; }