Improve card layout: move pagination inside main, add responsive grid (3 rows × 4 cols = 12 items), display keywords as tags, optimize text sizes and spacing

public/assets/main.css

@@ -127,16 +127,68 @@ header nav a {
 
 main {
   background: #3c856bff;
-  display: grid;
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  grid-auto-flow: column;
-  grid-auto-columns: 260px;
-  gap: 1rem;
+  position: relative;
   padding: 1rem;
   box-sizing: border-box;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cards-container {
+  display: grid;
+  gap: 0.75rem;
+  flex: 1;
+  min-height: 0;
+  padding: 0.5rem;
+  overflow: hidden;
+}
+
+/* Default: 3 rows × 4 columns = 12 items */
+.cards-container {
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-flow: row;
+}
+
+/* Small screens: 2 rows × 3 columns = 6 items */
+@media (max-width: 1200px) {
+  .cards-container {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Medium screens: 3 rows × 4 columns = 12 items */
+@media (min-width: 1201px) and (max-width: 1500px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Large screens: 3 rows × 6 columns = 18 items */
+@media (min-width: 1701px) {
+  .cards-container {
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+/* Extra large screens: 4 rows × 6 columns = 24 items */
+@media (min-width: 2000px) {
+  .cards-container {
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+/* Mobile placeholder (will adjust later) */
+@media (max-width: 768px) {
+  .cards-container {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 .card-link {
@@ -148,14 +200,17 @@ main {
 
 .card {
   background: #eee;
-  border-radius: 10px;
-  padding: 1rem;
-  scroll-snap-align: start;
+  border-radius: 8px;
+  padding: 0.5rem;
   height: 100%;
+  width: 100%;
   box-sizing: border-box;
   transition: transform 0.2s, box-shadow 0.2s;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
 }
 
 .card:hover {
@@ -166,30 +221,61 @@ main {
 .card-content {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.3rem;
+  height: 100%;
+  overflow: hidden;
 }
 
 .card .title {
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 600;
   margin: 0;
-  line-height: 1.3;
+  line-height: 1.15;
   color: #333;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .card .authors {
-  font-size: 0.9rem;
+  font-size: 0.65rem;
   margin: 0;
   color: #666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .card .year {
-  font-size: 0.85rem;
+  font-size: 0.65rem;
   margin: 0;
   color: #9557b5;
   font-weight: 600;
 }
 
+.card .tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+  margin-top: auto;
+  padding-top: 0.2rem;
+}
+
+.card .tag {
+  font-size: 0.55rem;
+  padding: 0.15rem 0.25rem;
+  background: rgba(149, 87, 181, 0.15);
+  color: #7a3d95;
+  border-radius: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  font-weight: 500;
+}
+
 footer {
   background: #222222ff;
   overflow: hidden;
@@ -253,11 +339,13 @@ footer {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 0.75rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
-  margin: 1rem auto;
+  margin-top: 1rem;
   width: fit-content;
+  align-self: center;
+  flex-shrink: 0;
 }
 
 .pagination-btn {