layout ok on firefox

styles/elements/banners.css

@@ -54,6 +54,14 @@
 * sizes
 *
 */
+.banner_size_0 {
+	background-image: url(../../docs/banners/banner_0.svg);
+	--banner_height: calc(var(--base_banner_height) * 1);
+}
+.banner_size_00 {
+	background-image: url(../../docs/banners/banner_00.svg);
+	--banner_height: calc(var(--base_banner_height) * 1);
+}
 .banner_size_1 {
 	background-image: url(../../docs/banners/banner_1.svg);
 	--banner_height: calc(var(--base_banner_height) * 1);
@@ -74,3 +82,16 @@
 	background-image: url(../../docs/banners/banner_5.svg);
 	--banner_height: calc(var(--base_banner_height) * 5);
 }
+
+
+
+/*
+* individual banners
+*
+*/
+
+#top_banner {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}

styles/elements/hero.css

@@ -1,7 +1,13 @@
 #hero {
 	min-height: 100vh;
 	grid-template-rows: auto auto 1fr;
-	header {
-		padding-top: 50px;
+	.subtitle {
+		text-align: center;
+	}
+	details {
+		#cv_download {
+			margin-top: 20px;
+			text-align: center;
+		}
 	}
 }

styles/elements/sections.css

@@ -2,7 +2,8 @@ section {
 	display: grid;
 	margin: 0px;
 	width: 100vw;
-	grid: 1fr auto 1fr / auto;
+	grid-template-columns: 1fr auto 1fr;
+	grid-auto-rows: auto;
 	grid-gap: 10px;
 	gap: 10px;
 	min-height: 100vh;
@@ -24,7 +25,7 @@ section {
 	> * {
 		grid-column: 2 / span 1;
 	}
-	> .full_width {
+	> .grid_full_width {
 		grid-column: 1 / span 3;
 	}
 

styles/global.css

@@ -16,6 +16,21 @@
 }
 
 
+.margin_top_small {
+	margin-top: 10px;
+}
+.margin_bottom_small {
+	margin-bottom: 10px;
+}
+
+.margin_top_big {
+	margin-top: 50px;
+}
+.margin_bottom_big {
+	margin-bottom: 50px;
+}
+
+
 /*
  DATA-FLEX