.n-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 20px;
    /* Отступы для контейнера сверху, слева и справа */
    margin-bottom: 15px;
}

.header {
    position: relative;
}

.card {
    display: flex;
    /* Включаем flexbox */
    flex-direction: column;
    /* Элементы располагаются по вертикали */
    justify-content: space-between;
    /* Пространство между верхними и нижними элементами */
    flex: 0 0 20%;
    /* Занимает 20% ширины */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    /* Внутренние отступы */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: flex-basis 0.3s ease;
    position: relative;
    /* Для размещения элементов снизу */
    min-height: 300px;
}

.card img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.card h3 {
    margin: 10px 0;
    font-size: 18px;
    color: #333;
}

.card p {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
}

/* Контейнер для даты и кнопки */
.card-footer {
    display: flex;
    justify-content: space-between;
    /* Размещает дату слева и кнопку справа */
    align-items: center;
    margin-top: 20px;
    /* Расстояние между кнопкой/датой и основным содержимым */
}

.card .date {
    font-size: 12px;
    color: #aaa;
    text-align: left;
}

.card a {
    background-color: #007bff;
    text-decoration: none;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card a:hover {
    background-color: #0056b3;
}

/* Общий стиль для кнопок */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 70px 0;
}

.pagination .btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    background-color: #007bff;
    /* Основной цвет кнопки */
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
    text-align: center;
}

.pagination .btn:hover {
    background-color: #0056b3;
    /* Цвет кнопки при наведении */
    transform: scale(1.05);
    /* Легкий эффект увеличения */
}

.pagination .btn:active {
    background-color: #003f8a;
    /* Цвет кнопки при нажатии */
    transform: scale(0.95);
    /* Легкий эффект уменьшения */
}

.pagination .btn-prev {
    background-color: #28a745;
    /* Зеленый цвет для кнопки "Previous" */
}

.pagination .btn-prev:hover {
    background-color: #218838;
}

.pagination .btn-next {
    background-color: #dc3545;
    /* Красный цвет для кнопки "Next" */
}

.pagination .btn-next:hover {
    background-color: #c82333;
}

/* Индикатор страницы */
.pagination .page-indicator {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* Адаптивность */
@media (max-width: 800px) {
    .card {
        margin-bottom: 0px;
        flex: 0 0 100%;
        /* Занимает 80% ширины */
    }
}