[backup] games from server with images

crates/lanspread-tauri-deno-ts/src/App.css

@@ -6,7 +6,7 @@ body {
 
 .grid-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Changed from 220px to 140px */
   gap: 20px;
   padding: 20px;
 }
@@ -20,6 +20,7 @@ body {
   transition: background 0.3s;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   cursor: pointer;
+  /* max-width: 280px; */
 }
 
 .item:hover {
@@ -27,9 +28,11 @@ body {
 }
 
 .item img {
-  width: 100%;
-  height: 150px;
+  width: 280px;  /* Fixed width */
+  height: 200px; /* Fixed height */
   object-fit: cover;
+  display: block; /* Removes any unwanted spacing */
+  margin: 0 auto; /* Centers the image if container is wider */
 }
 
 .item-name {
@@ -93,3 +96,31 @@ body {
   50% { opacity: 0.8; }
   100% { opacity: 1; }
 }
+
+.search-container {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.search-input {
+  width: 100%;
+  max-width: 400px;
+  padding: 10px 15px;
+  font-size: 16px;
+  color: #D5DBFE;
+  background: #000938;
+  border: 1px solid #444;
+  border-radius: 25px;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.search-input:focus {
+  border-color: #4866b9;
+  box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
+}
+
+.search-input::placeholder {
+  color: #8892b0;
+}