fix homepage card grid styling: gaps, borders, rounded corners, gradient aspect-ratio

public/assets/css/main.css

@@ -23,10 +23,10 @@
 .cards-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 0;
+  gap: 1.25rem;
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 1rem 1.25rem 1.5rem;
 }
 
 @media (min-width: 1400px) {
@@ -46,9 +46,16 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
-  border: none;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
   background: var(--bg-primary);
   overflow: hidden;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
 }
 
 .card > a {
@@ -57,6 +64,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  border-radius: inherit;
 }
 
 /* Media wrapper: <figure> for real images/video, <div class="card__media--gradient"> for placeholders */
@@ -67,6 +75,7 @@
   background: var(--bg-tertiary);
   position: relative;
   margin: 0; /* reset <figure> default margin */
+  border-radius: 7px 7px 0 0;
 }
 
 .home-body figure img,
@@ -96,7 +105,7 @@
 
 .card__media--gradient {
   width: 100%;
-  height: 100%;
+  aspect-ratio: 4/3;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -104,6 +113,7 @@
   padding: 1rem;
   text-align: center;
   box-sizing: border-box;
+  border-radius: 7px 7px 0 0;
 }
 
 .card__gradient-author {
@@ -124,19 +134,29 @@
   overflow: hidden;
 }
 
-/* Latest-year label */
+/* Latest-year label — section heading style */
 .home-latest-label {
-  font-style: italic;
+  font-style: normal;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 0.9rem 1.25rem 0.6rem;
+  border-bottom: 1px solid var(--border-primary);
+  margin: 0;
 }
 
 /* Card caption — <p> directly inside the card <a> link, below the media */
 .home-body li > a > p {
-  padding: 0.55rem 0.5rem 0.65rem;
+  padding: 0.55rem 0.75rem 0.65rem;
   font-size: 0.88rem;
   line-height: 1.35;
   color: var(--text-primary);
   margin: 0;
   font-weight: 400;
+  border-top: 1px solid var(--border-primary);
 }
 
 /* Empty-state message shown when no cards exist */
@@ -239,4 +259,10 @@
   .card__media--gradient {
     transition: none;
   }
+  .card {
+    transition: none;
+  }
+  .card:hover {
+    transform: none;
+  }
 }