style: Change pictures layout from flex to grid for improved responsiveness

Website/templates/main.html

@@ -353,21 +353,21 @@
 
 	.pictures {
 		margin-top: 1rem;
-		display: flex;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
 		gap: 1rem;
-		flex-wrap: wrap;
+		align-items: stretch;
-		justify-content: flex-start;
-		align-items: flex-start;
 	}
 
 	.picture {
 		text-align: center;
-		flex: 0 0 auto;
+		max-width: none;
-		max-width: 220px;
 	}
 
 	.picture img {
 		width: 100%;
+		aspect-ratio: 4 / 5;
+		object-fit: cover;
 		border-radius: 12px;
 		display: block;
 	}
@@ -614,6 +614,10 @@
 			grid-template-columns: 1fr;
 		}
 
+		.pictures {
+			grid-template-columns: 1fr;
+		}
+
 		.testimonials-grid {
 			grid-template-columns: 1fr;
 		}