[WIP] playing with grids

src/components/PageLayout/Banner/Banner.module.scss

@@ -1,16 +1,14 @@
 .banner{
-  position: fixed;
   width: 100vw;
-  top: 10rem;
-  left: 0;
   height: 2rem;
   background-color: black;
   color: white;
   border: none;
   display: flex;
   align-items: center;
   padding: 0px;
-  z-index: 2;
+  z-index: 3;
+  margin-bottom: 2rem;
 }
 
 

src/components/PageLayout/PageLayout.tsx

@@ -3,7 +3,6 @@ import {FC, ReactNode, useEffect} from 'react'
 
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 
-import {Banner} from './Banner/Banner'
 import {Footer} from './Footer/Footer'
 import {MenuMain} from './MenuMain/MenuMain'
 import styles from './PageLayout.module.scss'
@@ -28,7 +27,6 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
   return (
     <div className={styles.pageContainer}>
       <TopGrid title={pageTitle} />
-      <Banner />
       <MenuMain />
       <div className={styles.grid}>
         <StromLogo />

src/components/PageLayout/TopGrid/TopGrid.module.scss

@@ -3,11 +3,11 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 10rem;
+  height: auto;
   background-color: white;
   z-index: 3;
   display: grid;
-  grid-template: 1fr 1fr / 1fr 2fr 1fr;
+  grid-template: 1fr 1fr auto / 1fr 2fr 1fr;
 }
 
 .menu {
@@ -27,6 +27,15 @@
   align-items: center;
 }
 
+.baner {
+  // third row 
+  grid-row: 3;
+  grid-column: 1/4;
+  display: flex;
+  justify-content: flex-end;
+}
+
+
 .semesterPicker {
   // second row right column
   grid-row: 2;

src/components/PageLayout/TopGrid/TopGrid.module.scss.d.ts

@@ -1,5 +1,6 @@
 export type Styles = {
   active: string
+  baner: string
   container: string
   menu: string
   menuItem: string

src/components/PageLayout/TopGrid/TopGrid.tsx

@@ -7,6 +7,7 @@ import {FC} from 'react'
 import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
+import {Banner} from '../Banner/Banner'
 import styles from './TopGrid.module.scss'
 
 type TopGridProps = {
@@ -46,6 +47,9 @@ export const TopGrid: FC<TopGridProps> = ({title}) => {
           <SemesterPicker page={page} />
         </div>
       )}
+      <div className={styles.baner}>
+        <Banner />
+      </div>
     </div>
   )
 }