/* components/blog_component/blog_component.css */

/* Настройки темы фона */
.theme-grey { background-color: #eaeaea; }
.theme-white { background-color: #ffffff; }

.no-wrap {
    white-space: nowrap;
}

/* Секция блога и исправление больших отступов сверху */
.blog-section {
    padding-top: 35px;    /* Аккуратный контролируемый отступ сверху */
    padding-bottom: 50px; /* Отступ снизу секции */
}

.blog-section h2 {
    margin-top: 0;        /* Полностью убираем огромный браузерный маргин над заголовком */
    margin-bottom: 25px;  /* Отступ от заголовка вниз до сетки с карточками */
}

/* Сетка блога */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Строго 3 в ряд на десктопе */
    gap: 30px 30px; 
    margin: 0;
}

.f-center { display: flex; justify-content: center; width: 100%; margin-top: 0px; }
.f-green { color: #167f2b; }

/* Медиазапросы сеток (Адаптив) */
@media (min-width: 601px) and (max-width: 1025px) {
    .blog-section {
        padding-top: 25px;
        padding-bottom: 40px;
    }
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .blog-section {
        padding-top: 20px;
        padding-bottom: 35px;
    }
    .blog-section h2 {
        margin-bottom: 15px;
    }
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}