wip design is mobile first with some bugs

styles/elements/banners.css

@@ -91,3 +91,12 @@
 	--banner_height: calc(var(--base_banner_height) * 5);
 	--dot_size: calc(var(--base_dot_size) * 5);
 }
+
+
+/* specific banners */
+#top_banner {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+}

styles/elements/hero.css

@@ -1,7 +1,14 @@
 #hero {
 	min-height: 100vh;
 	grid-template-columns: 1fr auto 1fr;
-	grid-template-rows: auto auto auto 1fr;
+	/*
+	* WIP : trying to find a solution to have both qualities :
+	* - elements are spread across the page vertically ('hugo lamy developpeur' is not compacted on top)
+	* - the details element 'voir le cv' dont jump when we unroll it
+	*
+	grid-template-rows: 1fr auto 1fr;
+	*/
+	grid-template-rows: auto auto 1fr;
 	.subtitle {
 		text-align: center;
 	}

styles/elements/projects.css

@@ -5,15 +5,29 @@
 	article {
 		display: grid;
 		grid-gap: 20px;
-		grid-auto-columns: repeat(auto-fill, minmax(500px, 1fr));
+		/*
+		* trying to create a responsive design, but still some bugs
+		* so for now stick to mobile first
+		*
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		*/
+		grid-template-columns: auto;
 		p {
 			grid-column: 1 / span 2;
+			grid-column: 1;
+		}
+		img:first-of-type {
+			grid-column: 1;
 		}
 		img {
+			width: 600px;
+		/*
+			min-width: 300px;
+			width: 100%;
 			max-height: 500px;
 			max-width: 500px;
-			width: 100%;
 			margin: 0px auto;
+		*/
 		}
 	}
 	.mouse {