/* --- Mobile blog spacing + smooth appear (only for blog cards) --- */
@media (max-width: 900px) {
  /* больше расстояние между карточками */
  #blog-list .grid {
    grid-template-columns: 1fr;                 /* одна колонка на мобиле */
    gap: clamp(18px, 4.5vw, 26px);              /* расстояние между карточками */
  }
  #blog-list .r-item {
    margin-bottom: clamp(10px, 3vw, 14px);      /* доп. отступ снизу на всякий случай */
  }
  /* чуть больше воздуха вокруг секции на мобиле */
  #blog-list {
    padding-top: clamp(20px, 5vw, 28px);
    padding-bottom: clamp(44px, 10vw, 64px);
  }

  /* плавное появление карточек */
  #blog-list .r-item {
    opacity: 0;
    transform: translateY(12px);
    animation: blogFadeUp .6s ease forwards;
  }
  /* лёгкая «ступенька» появления */
  #blog-list .r-item:nth-child(1) { animation-delay: .05s; }
  #blog-list .r-item:nth-child(2) { animation-delay: .15s; }
  #blog-list .r-item:nth-child(3) { animation-delay: .25s; }
  #blog-list .r-item:nth-child(4) { animation-delay: .35s; }
  #blog-list .r-item:nth-child(5) { animation-delay: .45s; }
  #blog-list .r-item:nth-child(6) { animation-delay: .55s; }
}

@keyframes blogFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* уважение к настройке «уменьшить анимацию» */
@media (prefers-reduced-motion: reduce) {
  #blog-list .r-item { animation: none !important; opacity: 1; transform: none; }
}