/*!*Стили страницы НОВОСТИ*!*/

.main-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5% 0 2%;
    gap: 4px;
}

.title-news {
    font: var(--title-news);
    color: var(--color-txt);
}

.news-containers {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: var(--margin-container-left);
}

.news-block {
    border: 1px solid #FFFFFF4D;
    border-radius: 30px;
    height: auto;
    padding: 2vw;
    align-items: center;
    width: 30%;
}

.main-news-block h2 {
    font: var(--txt-title-new);
    color: var(--color-txt);
}

.main-news-block p {
    overflow: hidden;
    white-space: wrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font: var(--p-news);
    color: var(--color-txt);
}

.news-img{
    display: flex;
    border-radius: 24px;
    width: 100%;
    height: auto;
}

.main-news-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 880px) {
    .news-containers {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

    }
    .news-block {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .news-block {
        padding: 16px;
    }
    .main-news-block {
        gap: 10px;
    }
}

/* Стиль пагинации в новостях */
.pages {
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
    margin: 50px 0;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--color-txt);
    font: var(--bnt-txt);
    text-decoration:none;
}

.pages-number {
    display: flex;
    gap: 12px;
    justify-content: space-around;
}


.page-btn:hover, .page-btn.active{
    background: var(--color-txt);
    transform:translateY(-2px);
    color: var(--black);
}


.right {
    rotate: 90deg;
    height: 14px;
}

.left {
    rotate: -90deg;
    height: 14px;
}

/*Стиль страницы с одной новостью*/

.main-page-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: var(--margin-container-top);
}

.main-page {
    width: 60vw;
    color: var(--black);
    padding: 16px;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.main-page h1 {
    font: var(--title-new-page);
    border-left: var(--black) 5px solid;
    padding-left: 16px;
    margin: 16px;
}

.main-page h2 {
    margin: 0 16px;
    font: var(--txt-title-new);
    border-bottom: var(--black) 3px solid;
    padding-top: 20px;
}

.main-page p {
    font: var(--txt-about);
    margin: 0 16px;
    padding: 16px 0;
}

.main-page ul, .main-page ol {
    font: var(--txt-about);
    margin: 6px 64px;
}

@media (max-width: 760px) {
    .main-page {
        width: 100%;
    }
}