make grid

src/App.css

@@ -1,7 +1,7 @@
 body {
   min-height: 100vh;
   background-color: #282c34;
-  color: #B9B8D6;
+  color: #b9b8d6;
 }
 
 .Header {
@@ -24,7 +24,7 @@ body {
   flex-direction: column;
   text-align: center;
 
-	background-color: #3B3E49;
+  background-color: #3b3e49;
 
   border-radius: 10px 10px 0px 0px;
   margin: 0 0 1em 0;
@@ -35,17 +35,18 @@ body {
 .GalleryItem > a {
   color: inherit;
 
-  margin: 0.5em;
+  margin: 0;
   overflow: clip;
 }
 
-.GalleryItem > img, video {
+.GalleryItem > img,
+video {
   max-height: 80vh;
 }
 
 .DirectoryItem > button {
-	background-color: #44655D;
+  background-color: #44655d;
-  color: #B9B8D6;
+  color: #b9b8d6;
   border: none;
   padding: 10px 20px;
   text-align: center;
@@ -63,6 +64,34 @@ body {
 }
 
 .ParentDirectoryItem > button {
-	background-color: #4D4F5D;
+  background-color: #4d4f5d;
 }
 
+@media (min-width: 62em) {
+  .GalleryItem {
+    margin: 1em;
+    border-radius: 1em;
+
+    overflow: hidden;
+  }
+
+  .Contents {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    align-content: center;
+    flex-wrap: wrap;
+  }
+
+  .GalleryImg {
+    object-fit: cover;
+    width: 12em;
+    height: 9em;
+  }
+
+  .GalleryVid {
+    object-fit: cover;
+    width: 12em;
+    height: 9em;
+  }
+}

src/App.tsx

@@ -115,9 +115,8 @@ function ImageItem({ thumbnail_url, url }: galleryItem) {
   return (
     <div className="GalleryItem">
       <a href={url} target="_blank">
-        {getFileName(url)}
+        <img className="GalleryImg" src={thumbnail_url} loading="lazy" />
       </a>
-      <img src={thumbnail_url} loading="lazy" />
     </div>
   );
 }
@@ -126,11 +125,10 @@ function VideoItem({ url }: galleryItem) {
   return (
     <div className="GalleryItem">
       <a href={url} target="_blank">
-        {getFileName(url)}
-      </a>
         <video controls>
-        <source src={url} type="video/mp4" />
+          <source className="GalleryVid" src={url} type="video/mp4" />
         </video>
+      </a>
     </div>
   );
 }