Reposition medias in popup

src/styles/_page.project.map.scss

@@ -20,28 +20,29 @@ $thumbnail-max-size: 60px;
 		padding: var.$block-spacing;
 		background-color: color.$default-bg-light;
 
-		h1 {
-			font-size: 1.4em;
-			margin: 0;
-			font-weight: bold;
-		}
-
-		.separator {
-			border-top: 1px solid color.$default-bg;
-			margin: var.$elem-spacing 0;
-		}
-
 		/* Marker Popup */
 		.info-window {
-			h1 .message-type {
-				color: color.$default;
-				font-weight: normal;
-				font-size: calc(1em / 1.4);
-				margin-left: 0.5em;
-				vertical-align: middle;
+			h1 {
+				font-size: 1.4em;
+				margin: 0;
+				font-weight: bold;
+				text-align: center;
+
+				.message-type {
+					color: color.$default;
+					font-weight: normal;
+					font-size: calc(1em / 1.4);
+					margin-left: 0.5em;
+					vertical-align: center;
+				}
 			}
 
-			p {
+			.separator {
+				border-top: 1px solid color.$default-bg;
+				margin: var.$elem-spacing 0;
+			}
+
+			.info {
 				font-size: 1.0em;
 				margin: var.$elem-spacing 0 0 0;
 
@@ -78,20 +79,23 @@ $thumbnail-max-size: 60px;
 			&.message {
 				.medias {
 					line-height: 0;
-					display: grid;
+					display: flex;
+					flex-wrap: wrap;
 					gap: var.$elem-spacing;
-					grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr));
-					place-items: center;
+					align-items: center;
+					margin-top: var.$elem-spacing;
 
 					a.media-link {
-						&:last-child {
-							margin-right: 0;
-						}
+						flex: 0 0 auto;
 
 						img {
 							max-width: $thumbnail-max-size;
 							max-height: calc($thumbnail-max-size * 2/3);
 						}
+
+						&.drill .drill-icon {
+							font-size: 1.5em;
+						}
 					}
 				}
 			}
@@ -137,4 +141,4 @@ $thumbnail-max-size: 60px;
 			}
 		}
 	}
-}
+}