refactor: config

assets/scss/custom.scss

@@ -55,23 +55,98 @@
   }
 }
 
-@media (min-width: 1024px) {
-  .article-list--compact.links {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    background: none;
-    box-shadow: none;
+.links-section {
+  margin-bottom: 10px;
+}
 
-    article {
-      background: var(--card-background);
-      border: none;
-      box-shadow: var(--shadow-l2);
-      margin-bottom: 8px;
-      border-radius: 10px;
-      &:nth-child(odd) {
-        margin-right: 8px;
-      }
-    }
+.links-section__header {
+  margin-bottom: 30px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--card-separator-color);
+
+  h1 {
+    margin: 0;
+    color: var(--card-text-color-main);
+    font-size: 2.2rem;
+  }
+}
+
+.links-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.link-card {
+  min-width: 0;
+  min-height: 132px;
+  overflow: hidden;
+  border-radius: var(--card-border-radius);
+  background: var(--card-background);
+  box-shadow: var(--shadow-l1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-l2);
+  }
+
+  > a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 132px;
+    padding: 24px 28px;
+    gap: 24px;
+  }
+}
+
+.link-card__details {
+  min-width: 0;
+}
+
+.link-card__title {
+  margin: 0 0 8px;
+  overflow: hidden;
+  color: var(--card-text-color-main);
+  font-size: 1.8rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-card__description {
+  margin: 0;
+  overflow: hidden;
+  color: var(--card-text-color-secondary);
+  font-size: 1.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-card__image {
+  flex: 0 0 72px;
+  width: 72px;
+  height: 72px;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 12px;
+    object-fit: cover;
+  }
+}
+
+@media (min-width: 768px) {
+  .links-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .links-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }