Fix popup medias

src/styles/_page.project.map.scss

@@ -2,6 +2,8 @@
 @use "var";
 @use "color";
 
+$thumbnail-max-size: 60px;
+
 #map {
 	position: absolute;
 	left: 0;
@@ -9,8 +11,13 @@
 	bottom: 0;
 	width: 100%;
 
-	/* Leaflet Popup */
+	/* Popup */
+	.maplibregl-popup {
+		max-width: 300px;
+	}
+
 	.maplibregl-popup-content {
+		padding: var.$block-spacing;
 
 		h1 {
 			font-size: 1.4em;
@@ -20,7 +27,7 @@
 
 		.separator {
 			border-top: 1px solid #CCC;
-			margin: var.$elem-spacing 0 var.$block-spacing 0;
+			margin: var.$elem-spacing 0;
 		}
 
 		/* Marker Popup */
@@ -44,11 +51,12 @@
 
 			.medias {
 				line-height: 0;
+				display: grid;
+				gap: var.$elem-spacing;
+				grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr));
+				place-items: center;
 
 				a {
-					display: inline-block;
-
-					margin: var.$block-spacing var.$block-spacing 0 0;
 					&:last-child {
 						margin-right: 0;
 					}
@@ -73,8 +81,8 @@
 					img {
 						width: auto;
 						height: auto;
-						max-width: 200px;
-						max-height: 100px;
+						max-width: $thumbnail-max-size;
+						max-height: calc($thumbnail-max-size * 2/3);
 						border-radius: var.$block-radius;
 						image-orientation: from-image;
 						transition: All 0.2s;