/* Стили для контейнера рубрик */
.rubrics-container {
    display: flex; /* Используем flexbox для горизонтального расположения */
    flex-wrap: wrap; /* Перенос на новую строку, если не хватает места */
    gap: 15px; /* Расстояние между рубриками */
    margin-bottom: 20px;
}
/* Стили для контейнера рубрик */
.rubrics-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

/* Стили для ссылок рубрик */
.rubric-link {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    padding: 8px 12px;
    background-color: #f4f4f4;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Эффект при наведении на рубрику */
.rubric-link:hover {
    background-color: #e0e0e0;
}

/* Ширина средней колонки */
#primary {
    width: 100%;
    max-width: 720px; /* Пример ширины средней колонки */
    margin: 0 auto; /* Центрирование */
}

/* Стили для ссылок рубрик */
.rubric-link {
    text-decoration: none; /* Убираем подчеркивание */
    color: #333; /* Цвет текста */
    font-size: 16px; /* Размер шрифта */
    padding: 8px 12px; /* Внутренние отступы */
    background-color: #f4f4f4; /* Фон рубрики */
    border-radius: 5px; /* Закругленные углы */
    transition: background-color 0.3s ease; /* Плавный переход при наведении */
}

/* Эффект при наведении на рубрику */
.rubric-link:hover {
    background-color: #e0e0e0; /* Изменение фона при наведении */
}
@media (max-width: 768px) {
    .rubric-link {
        flex: 1 1 calc(50% - 15px); /* По 2 рубрики в строке на маленьких экранах */
    }
}

@media (max-width: 480px) {
    .rubric-link {
        flex: 1 1 100%; /* Одна рубрика в строке на очень маленьких экранах */
    }
}