Refactored two divs on about page to single div with CSS grid

Author: navyansh007

frontend/about.md

@@ -229,23 +229,23 @@ title: About Us
 	<h3 class="text-xl font-semibold mb-4">
 		<span aria-hidden="true">🇦🇺</span> Brisbane Moderators
 	</h3>
-	<div class="flex flex-wrap justify-center gap-6">
+	<div class="grid grid-cols-1 gap-6 justify-items-center">
 		<a href="https://github.com/therealnugget" class="flex flex-col items-center text-center team-role team-role-coordinator text-team-role-coordinator">
 			<img class="w-32 md:w-48 lg:w-[300px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/therealnugget.jpeg' | url }}" alt="therealnugget avatar" />
 			<span class="font-medium">Thomas</span>
 			<span class="github">@therealnugget</span>
 		</a>
-	</div>
-	<div class="flex flex-wrap justify-center gap-6">
-		<div class="flex flex-col items-center text-center w-1/2 sm:w-1/3 team-role team-role-leader text-team-role-leader">
-			<img class="w-32 md:w-40 lg:w-[225px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/octocat.png' | url }}" alt="Eddie avatar" />
-			<span class="font-medium">Eddie</span>
-			<span class="github">N/A</span>
-		</div>
-		<div class="flex flex-col items-center text-center w-1/2 sm:w-1/3 team-role team-role-leader text-team-role-leader">
-			<img class="w-32 md:w-40 lg:w-[225px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/octocat.png' | url }}" alt="Jasper avatar" />
-			<span class="font-medium">Jasper</span>
-			<span class="github">N/A</span>
+		<div class="flex flex-wrap justify-center gap-6">
+			<div class="flex flex-col items-center text-center team-role team-role-leader text-team-role-leader">
+				<img class="w-32 md:w-40 lg:w-[225px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/octocat.png' | url }}" alt="Eddie avatar" />
+				<span class="font-medium">Eddie</span>
+				<span class="github">N/A</span>
+			</div>
+			<div class="flex flex-col items-center text-center team-role team-role-leader text-team-role-leader">
+				<img class="w-32 md:w-40 lg:w-[225px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/octocat.png' | url }}" alt="Jasper avatar" />
+				<span class="font-medium">Jasper</span>
+				<span class="github">N/A</span>
+			</div>
 		</div>
 	</div>
 	<h3 class="text-xl font-semibold mb-4">