fluid flow

src/components/flow/TestGrid/index.tsx

@@ -6,31 +6,10 @@ import * as styles from './styles.scss';
 
 export const TestGrid = () => (
   <div>
-    <div
-      style={{
-        // gridRow: "1 / 2",
-        // gridColumn: "1 / -1",
-        background: '#222222',
-        borderRadius: 6,
-        height: 300,
-        marginBottom: 4,
-        display: 'flex',
-      }}
-    >
-      HERO
-    </div>
-
     <div className={styles.grid_test}>
-      <div
-        style={{
-          gridRow: '1 / 3',
-          gridColumn: '-2 / -1',
-          background: '#090909',
-          borderRadius: 4,
-        }}
-      >
-        STAMP
-      </div>
+      <div className={styles.hero}>HERO</div>
+
+      <div className={styles.stamp}>STAMP</div>
 
       {range(1, 20).map(el => (
         <Cell

src/components/flow/TestGrid/styles.scss

@@ -17,3 +17,32 @@ $cols: $content_width / $cell;
 .pad_last {
   grid-column-end: $cols + 1;
 }
+
+.hero {
+  grid-row-start: 0;
+  grid-row-end: span 2;
+  grid-column-start: 0;
+  grid-column-end: span 4;
+  // gridRow: "1 / 2",
+  // gridColumn: "1 / -1",
+  background: #222222;
+  border-radius: $radius;
+  // height: 33vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}
+
+.stamp {
+  // grid-row: -1 / 3;
+  grid-row-end: span 3;
+  grid-column: -2 / -1;
+  background: #090909;
+  border-radius: $radius;
+  padding: $gap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}

src/components/main/Header/index.tsx

@@ -25,7 +25,7 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
   return (
-    <div className="default_container head_container">
+    <div>
       <div className={style.container}>
         <Logo />
 

src/components/main/Header/style.scss

@@ -4,6 +4,7 @@
   justify-content: flex-end;
   font-weight: 500;
   height: 96px;
+  margin-top: -20px;
 }
 
 .spacer {