Mobile: center pinned post, pagination fixes, minor layout tweaks

- First (pinned) post on mobile: title and image centered
- Pagination: restored page counter on mobile, buttons above footer
- Typography and layout minor improvements

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/css/hugo-easy-gallery.css

@@ -1,30 +1,33 @@
 /*
-Simple Gallery CSS - Small thumbnails in rows
+Gallery CSS — responsive grid with aspect-ratio thumbnails
 */
 
-/* Основные стили галереи */
+/* Основной контейнер — CSS Grid */
 .gallery {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.5%;
-    padding: 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 6px;
+    padding: 0;
     max-width: 1400px;
     margin: 0 auto;
-    justify-content: space-between;
 }
 
 /* Контейнер изображения */
 .gallery .box {
-    width: 23%;
-    height: 250px;
+    aspect-ratio: 1;
+    border-radius: 8px;
+    overflow: hidden;
     transition: transform 0.2s ease;
     border: none;
-    border-radius: 15px;
+    width: 100%;
+    height: auto;
 }
 
 /* Эффект наведения */
 .gallery .box:hover {
-    transform: scale(1.05);
+    transform: scale(1.03);
+    z-index: 1;
+    position: relative;
 }
 
 /* Figure элемент */
@@ -34,7 +37,6 @@ Simple Gallery CSS - Small thumbnails in rows
     margin: 0;
     position: relative;
     overflow: hidden;
-    border: none;
 }
 
 /* Изображение */
@@ -44,7 +46,12 @@ Simple Gallery CSS - Small thumbnails in rows
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    border-radius: 15px;
+    border-radius: 8px;
+    transition: transform 0.3s ease;
+}
+
+.gallery .box:hover .img {
+    transform: scale(1.08);
 }
 
 /* Скрываем обычные img теги */
@@ -57,72 +64,48 @@ Simple Gallery CSS - Small thumbnails in rows
     display: block;
     width: 100%;
     height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
 }
 
-/* Подпись скрыта для компактности */
+/* Подписи скрыты */
 .gallery figcaption {
     display: none;
 }
 
-/* Адаптивность */
-@media (max-width: 768px) {
-    .gallery .box {
-        width: 23%;
-        height: 180px;
-    }
-    
+/* Планшет — 3 колонки */
+@media (max-width: 900px) {
     .gallery {
-        gap: 1.5%;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 5px;
     }
 }
 
-@media (max-width: 480px) {
+/* Мобиль — 2 колонки */
+@media (max-width: 600px) {
     .gallery {
-        flex-direction: column;
-        gap: 15px;
-        padding: 15px;
-        align-items: center;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 3px;
     }
-    
+
     .gallery .box {
-        width: 95%;
-        max-width: 400px;
-        height: 250px;
-        border-radius: 12px;
+        border-radius: 4px;
     }
-    
+
     .gallery .img {
-        border-radius: 12px;
+        border-radius: 4px;
     }
-}
 
-/* Эффекты для подписей */
-.gallery.caption-effect-fade figcaption {
-    background: rgba(0, 0, 0, 0.7);
-    transform: none;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
+    /* Убираем hover-scale на тач-устройствах */
+    .gallery .box:hover {
+        transform: none;
+    }
 
-.gallery.caption-effect-fade .box:hover figcaption {
-    opacity: 1;
-}
-
-.gallery.caption-position-center figcaption {
-    top: 50%;
-    bottom: auto;
-    transform: translateY(-50%);
-    background: rgba(0, 0, 0, 0.7);
-    text-align: center;
-    padding: 16px;
-}
-
-.gallery.caption-position-center .box:hover figcaption {
-    transform: translateY(-50%);
-}
-
-.gallery.caption-position-none figcaption {
-    display: none;
+    .gallery .box:hover .img {
+        transform: none;
+    }
 }
 
 /* Отдельные figure элементы (не в галерее) */
@@ -145,4 +128,4 @@ Simple Gallery CSS - Small thumbnails in rows
     height: 200px;
     background-size: cover;
     background-position: center;
-}
+}