add new logic contentgrid

src/styles/components/ContentGrid.css

@@ -24,15 +24,33 @@
   padding-top: 20px;
 }
 
-/* Сетка постов */
-.posts-grid {
+/* ===== СЕТКИ С РАЗНЫМ КОЛИЧЕСТВОМ КОЛОНОК ===== */
+
+/* Сетка на 4 колонки (по умолчанию) */
+.posts-grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--grid-gap);
   width: 100%;
 }
 
-/* Карточка поста - базовые стили */
+/* Сетка на 3 колонки */
+.posts-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--grid-gap);
+  width: 100%;
+}
+
+/* Базовый класс для обратной совместимости */
+.posts-grid {
+  display: grid;
+  gap: var(--grid-gap);
+  width: 100%;
+}
+
+/* ===== КАРТОЧКИ ПОСТОВ ===== */
+
 .post-card {
   background: white;
   border-radius: var(--border-radius);
@@ -44,16 +62,7 @@
   display: flex;
   flex-direction: column;
   height: 0;
-  padding-bottom: 100%; /* Aspect ratio hack для надежности */
-}
-
-/* Большие карточки (десктоп) */
-@media (min-width: 1200px) {
-  .post-card-large {
-    grid-column: span 2;
-    aspect-ratio: 2 / 1;
-    padding-bottom: 50%;
-  }
+  padding-bottom: 100%;
 }
 
 /* Hover эффекты */
@@ -66,15 +75,6 @@
   transform: scale(1.05);
 }
 
-/* Ссылка карточки */
-.post-card-link {
-  position: absolute;
-  inset: 0;
-  display: block;
-  text-decoration: none;
-  color: inherit;
-}
-
 /* Контейнер изображения */
 .post-image-container {
   position: absolute;
@@ -97,8 +97,6 @@
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-
-
 /* Оверлей с контентом */
 .post-content-overlay {
   position: absolute;
@@ -118,10 +116,6 @@
   gap: 8px;
 }
 
-
-
-
-
 .post-meta-overlay {
   margin-bottom: 3px;
 }
@@ -145,11 +139,6 @@
   text-overflow: ellipsis;
 }
 
-.category-badge-white{
-  background-color: white;
-  color: black;
-}
-
 .author-name {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.85);
@@ -157,41 +146,36 @@
   font-weight: 400;
 }
 
-/* Убедитесь что индикаторы не занимают лишнее место */
-#infinity-scroll-sentinel {
-  height: 1px;
-  width: 100%;
-  visibility: hidden;
-  pointer-events: none;
+.author-link {
+  color: white;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  transition: border-color var(--transition-speed) ease;
 }
 
-.loading-indicator {
-  text-align: center;
-  padding: 40px 0;
-  color: #666;
-  min-height: auto; /* ← Важно! */
+.author-link:hover {
+  border-bottom-color: white;
 }
 
-.no-more-posts {
-  text-align: center;
-  padding: 30px 0;
-  color: #666;
-  font-size: 16px;
-  border-top: 1px solid #eee;
-  margin-top: 20px;
-  min-height: auto; /* ← Важно! */
-}
+/* ===== АДАПТИВНОСТЬ ДЛЯ РАЗНЫХ ЭКРАНОВ ===== */
 
-
-
-
-/* Улучшения для больших карточек */
+/* Десктоп (1200px и больше) */
 @media (min-width: 1200px) {
-  .post-card-large .post-category-badge {
-    font-size: 12px;
-    padding: 6px 12px;
+  /* Для сетки 4 колонки - большие карточки на 2 колонки */
+  .posts-grid-4 .post-card-large {
+    grid-column: span 2;
+    aspect-ratio: 2 / 1;
+    padding-bottom: 50%;
   }
   
+  /* Для сетки 3 колонки - большие карточки на 2 колонки */
+  .posts-grid-3 .post-card-large {
+    grid-column: span 2;
+    aspect-ratio: 2 / 1;
+    padding-bottom: 50%;
+  }
+
+  /* Улучшения для больших карточек */
   .post-card-large .post-content-overlay {
     padding: var(--overlay-padding-large);
     gap: 10px;
@@ -212,27 +196,35 @@
   }
 }
 
-/* Ноутбуки: 3 колонки */
+/* Ноутбуки (992px - 1199px) */
 @media (min-width: 992px) and (max-width: 1199px) {
-  .posts-grid {
+  /* Все сетки переходят на 3 колонки */
+  .posts-grid-4,
+  .posts-grid-3 {
     grid-template-columns: repeat(3, 1fr);
   }
   
-  .post-card-large {
+  /* Большие карточки становятся обычными */
+  .posts-grid-4 .post-card-large,
+  .posts-grid-3 .post-card-large {
     grid-column: span 1;
     aspect-ratio: 1 / 1;
     padding-bottom: 100%;
   }
 }
 
-/* Планшеты: 2 колонки */
+/* Планшеты (768px - 991px) */
 @media (min-width: 768px) and (max-width: 991px) {
-  .posts-grid {
+  /* Все сетки переходят на 2 колонки */
+  .posts-grid-4,
+  .posts-grid-3 {
     grid-template-columns: repeat(2, 1fr);
     gap: var(--grid-gap-tablet);
   }
   
-  .post-card-large {
+  /* Большие карточки становятся обычными */
+  .posts-grid-4 .post-card-large,
+  .posts-grid-3 .post-card-large {
     grid-column: span 1;
     aspect-ratio: 1 / 1;
     padding-bottom: 100%;
@@ -243,18 +235,16 @@
   }
 }
 
-/* Мобильные: 1 колонка */
+/* Мобильные (до 767px) */
 @media (max-width: 767px) {
-  .posts-grid {
+  /* Все сетки переходят на 1 колонку */
+  .posts-grid-4,
+  .posts-grid-3 {
     grid-template-columns: 1fr;
     gap: var(--grid-gap-tablet);
   }
   
-  .post-card {
-    aspect-ratio: 2 / 1;
-    padding-bottom: 50%;
-  }
-  
+  .post-card,
   .post-card-large {
     aspect-ratio: 2 / 1;
     padding-bottom: 50%;
@@ -275,16 +265,9 @@
   .post-title-overlay {
     font-size: 15px;
   }
-  
-  .post-category-badge {
-    top: 12px;
-    right: 12px;
-    font-size: 10px;
-    padding: 4px 8px;
-  }
 }
 
-/* Очень маленькие экраны */
+/* Очень маленькие экраны (до 480px) */
 @media (max-width: 480px) {
   .post-card,
   .post-card-large {
@@ -300,33 +283,22 @@
   .post-title-overlay {
     font-size: 14px;
   }
-  
-  .post-category-badge {
-    top: 10px;
-    right: 10px;
-    padding: 3px 6px;
-    font-size: 9px;
-  }
 }
 
-/* Вспомогательные классы */
-.sr-only {
-  position: absolute;
-  width: 1px;
+/* ===== ИНДИКАТОРЫ ЗАГРУЗКИ ===== */
+
+#infinity-scroll-sentinel {
   height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+  width: 100%;
+  visibility: hidden;
+  pointer-events: none;
 }
 
-/* Состояния загрузки */
 .loading-indicator {
   text-align: center;
   padding: 40px 0;
   color: #666;
+  min-height: auto;
 }
 
 .loading-spinner {
@@ -352,6 +324,21 @@
   font-size: 16px;
   border-top: 1px solid #eee;
   margin-top: 20px;
+  min-height: auto;
+}
+
+/* ===== ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ ===== */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .no-posts {
@@ -361,6 +348,7 @@
   font-size: 18px;
 }
 
+/* Мобильные адаптации для индикаторов */
 @media (max-width: 767px) {
   .loading-spinner {
     width: 30px;
@@ -370,4 +358,4 @@
   .no-more-posts {
     padding: 20px 0;
   }
-}
+}