Put preview above editor on mobile

Author: vdsabev

style.css

@@ -121,7 +121,7 @@ header .title::after {
   left: 100%;
 
   font-family: var(--font-family-text);
-  font-size: min(max(0.75rem, 4vw), 1.5rem);
+  font-size: clamp(0.75rem, 4vw, 1.5rem);
   text-align: right;
 }
 
@@ -206,11 +206,23 @@ section:has(code-bedder) {
   grid-auto-rows: 33vh;
 }
 
+iframe {
+  grid-row-start: 1;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: var(--primary-500); /* mask white bottom line on mobile */
+}
+
 @media (min-width: 960px) {
   section:has(code-bedder) {
     grid-auto-rows: initial;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
+
+  iframe {
+    grid-row-start: initial;
+  }
 }
 
 section:not(:has(code-bedder)) {
@@ -226,16 +238,6 @@ section:not(:has(code-bedder)) {
   }
 }
 
-iframe {
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-
-code-bedder {
-  max-height: 100vh;
-}
-
 /* Buy */
 section:has(#buy) dl {
   display: flex;