refactor(styles): introduce wrap container selector

2 files changed, 38 insertions, 3 deletions

diff --git a/src/projects/galerie-des-tracts.md b/src/projects/galerie-des-tracts.md
index 0e72d81..3db7064 100644
--- a/src/projects/galerie-des-tracts.md
+++ b/src/projects/galerie-des-tracts.md
@@ -8,7 +8,7 @@ objectif de se faire connaître sous terre.
 Véritables moyens de communication là où les antennes 5G n'émettent pas, ils
 sont le plus souvent plastifiés et cachés dans les interstices de la roche.
 
-<div class="figure-container">
+<div class="figure-container wrap-container">
   <figure>
     <img src="/static/projects/2023-12-09--Le-Sousterreux--cochon.jpg">
     <figcaption>le Sousterreux "Avoir Une Bonne Alimentation Sous Terre", distribué à Cochon pendant la tractofolie de 2023</figcaption>
@@ -23,7 +23,7 @@ sont le plus souvent plastifiés et cachés dans les interstices de la roche.
   </figure>
 </div>
 
-<div class="figure-container">
+<div class="figure-container wrap-container">
   <figure>
     <img src="/static/projects/2023-12-09--L-Acet-Famille--rue-St-Jacques--C.jpg">
     <figcaption>carte de l'Acet Family, "Famille cataflics, I - Ancien.ne", échangée sous terre en décembre 2023</figcaption>
diff --git a/src/styles/main.css b/src/styles/main.css
index 4e25486..2cdb7be 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -103,6 +103,8 @@ img {
 	max-width: 100%;
 }
 
+/* figure container */
+
 .figure-container {
 	display: flex;
 	flex-direction: row;
@@ -110,6 +112,14 @@ img {
 	margin: 4em 0 4em 0;
 }
 
+.figure-container:has(+ .figure-container) {
+	margin-bottom: 1em;
+}
+
+.figure-container + .figure-container {
+	margin-top: 1em;
+}
+
 .figure-container figure {
 	margin: 0;
 	width: 100%;
@@ -129,6 +139,31 @@ figcaption {
 	/* title */
 
 	header h1 a {
-		font-size: 13vw;
+		font-size: 12vw;
+	}
+
+	/* figure container */
+
+	.figure-container figure:not(:last-child) {
+		margin-right: .5em;
+	}
+
+	/* wrap container */
+
+	.wrap-container {
+		flex-wrap: wrap;
+	}
+
+	.wrap-container:has(+ .wrap-container) {
+		margin-bottom: 0em;
+	}
+
+	.wrap-container + .wrap-container {
+		margin-top: 0em;
+	}
+
+	.wrap-container figure,
+	.wrap-container figure:not(:last-child) {
+		margin: 1em 0 1em 0;
 	}
 }