Fixed gallery

css/team.css

@@ -1,3 +1,11 @@
+/*
+	When page thin content stacks
+*/
+#team div:last-child {
+	justify-content: center;
+	align-items: center;
+}
+
 #team div img {
 	/*width: 100%;*/
 	max-width: 20em;
@@ -21,15 +29,40 @@
 #team div div {
 	display: block;
 }
-#teams div p {
+#team div p {
 	margin: 0 !important;
 }
 #team div span {
 	margin: 0 0.5em;
 }
 
+#team .gallery {
+	display: flex;
+	flex-direction: column;
+}
+#team .gallery div {
+	margin: auto -1em -1em;
+
+	display: flex;
+}
+#team .gallery div img {
+	margin: 0.5em;
+
+	min-width: none;
+	max-width: 100%;
+	height: 23em;
+
+
+	object-fit: cover;
+}
+#team .gallery h3 {
+	font-size: 24px;
+
+	margin: 0;
+}
+
 /*
-  When page is too thin, the picture and text stacks
+  Normal page view
 */
 
 @media (min-width:621px) {
@@ -40,4 +73,17 @@
 	#team div img {
 		min-width: 15em;
 	}
+	#team .gallery div img {
+		margin: 0.5em;
+
+		max-width: calc(50% - 1em);
+		width: 100%;
+		min-width: 20em;
+	}
+	#team .gallery div {
+		margin: auto -0.5em -0.5em;
+
+		flex-wrap: wrap;
+		justify-content: space-around;
+	}
 }

index.php

@@ -30,7 +30,7 @@
 			<section id="team">
 				<h2>The Teams</h2>
 				<?php
-				include"ui/teams.php";
+				include"ui/teams.html";
 				?>
 			</section>
 

ui/teams.html

@@ -7,6 +7,8 @@
   </div>
 </div>
 -->
+
+<!-- RedScorpion -->
 <div>
   <img src="images/teams/RSLogo.svg" alt="Red Scorpion logo" loading="lazy">
   <span></span>
@@ -14,6 +16,8 @@
     <p>Again is an innovative game made towards gamers from all ends. Speedrunners and achievers, to casual gamers admiring works and the environment. With: high quality, custom made, assets; fast, fun gameplay and many ways to finish. You are surely going to have a fun time playing! Made by Leon, Bartek, Michal and Nathan.</p>
   </div>
 </div>
+
+<!-- Spooked Mouse -->
 <div>
   <img src="images/teams/Spooked_Mouse.svg" alt="Spooked Mouse logo" loading="lazy">
   <span></span>
@@ -21,6 +25,8 @@
     <p>Mugunghwa is a game loosely set in South Korea about a lover who has been watching you from the shadows. They leave you gifts in hope that you'll one day seek them out so you can be together forever... Made by Wren</p>
   </div>
 </div>
+
+<!-- ... -->
 <div>
   <img src="images/teams/rainforestRunner.png" alt="Rainforrest Runner logo" loading="lazy">
   <span></span>
@@ -30,9 +36,17 @@
     <p>About: Rainforest Runner is an endless runner game where you will have to dodge the dangers of the Brazilian rainforest. If you survive, you're awarded with a chest full of treasure and rewards for completing the level. Good luck! You'll need it.</p>
   </div>
 </div>
-<div>
-  <?php
-    $images = glob("../images/gallery/*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE);
-    foreach ($images as $i) { echo "<img src='gallery/". basename($i) ."'>"; };
-  ?>
+<div class="gallery">
+  <h3>Game screenshots</h3>
+  <div>
+    <img src="./images/gallery/1.png" loading="lazy">
+    <img src="./images/gallery/2.png" loading="lazy">
+    <img src="./images/gallery/3.png" loading="lazy">
+    <img src="./images/gallery/4.png" loading="lazy">
+  </div>
+</div>
+
+<!-- More! -->
+<div>
+  <h3>And many other teams!</h3>
 </div>