use flex for container and tiles

Author: LinuxJava7

style.css

@@ -143,16 +143,18 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
 .container {
   margin: 2rem 0 0;
   flex: 1;
-  display: grid;
-  gap: 0 var(--grid-gap);
-  grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(5, minmax(1rem, calc(var(--pagewidth)/5))) [main-end] minmax(0, 1fr) [full-end];
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   max-width: var(--max-width);
   margin-left: auto;
   margin-right: auto;
+  padding: 0 var(--grid-gap);
 }
 
-.container * {
-  grid-column: main;
+.container > * {
+  width: 100%;
+  max-width: var(--pagewidth);
 }
 
 /* Tiles */
@@ -172,33 +174,22 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
 }
 
 .tile {
-  grid-column: auto;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   text-decoration: none;
   color: var(--window-fg-color);
-  grid-template-rows: auto 1fr auto;
-  align-content: stretch;
-  align-items: start;
   transition: all 300ms var(--slickease);
-  gap: 0;
   margin: 0;
   padding: 0;
   border-radius: 24px;
   background-color: var(--card-bg-color);
   color: var(--card-fg-color);
-  width: 100%;
   box-sizing: border-box;
-  min-width: 0;
   overflow: hidden;
-
   flex: 1;
   min-width: 350px;
 }
 
-.tile * {
-  grid-column: auto;
-}
-
 .tile img {
   height: 270px;
   object-fit: cover;
@@ -214,6 +205,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   gap: 0;
   min-width: 0;
   padding: 3rem;
+  flex: 1;
 }
 
 .tile h4 {
@@ -510,11 +502,11 @@ footer {
   }
 
   .container {
-    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(2, minmax(1rem, calc(var(--pagewidth)/2))) [main-end] minmax(0, 1fr) [full-end];
+    padding: 0 var(--grid-gap);
   }
 
   .tiles {
-    grid-template-columns: 1fr;
+    padding: 10px;
   }
 
   .tile {