@import url("./styles.css");
@media screen and (max-width: 1120px) {
    .firstPanel {
        padding: 0 16px 25px;
    }
    .firstPanel .left {
        padding: 25px 0 0;
        width: 60%;
    }
    .firstPanel .right {
        width: 40%;
    }
    .darkBlock p {
        width: 100%;
    }
    .darkBlock .panelLink {
        width: 100%;
    }
}
@media screen and (max-width: 960px) {
    .firstPanel .left {
        width: 100%;
    }
    .firstPanel .right {
        display: none;
    }
    .search {
        width: 100%;
    }
    .searchBtn {
        padding: 4px 10px;
    }
    .second_searchBtn {
        padding: 4px 10px;
    }
    .bottom {
        padding: 0;
    }

    .trendingNews {
        display: none;
    }
    .news {
        width: 100%;
    }
    .newsArticles > div {
        gap: 12px;
    }
    .newsArticle {
        width: calc(33.33333% - 8px);
    }

    .searchContainer .newsArticle {
        width: calc(33.33333% - 12px);
    }
    .newsBanner:before {
        padding-bottom: 45%; /*(height/width)*100*/
    }

    .newsContainer {
        padding-top: 20px;
    }
    .newsContainer p {
        font-size: var(--standart-font-size);
        line-height: var(--standart-line-height);
    }
    .page-link {
        font-size: 10px;
        line-height: 24px;
        min-width: 24px;
        height: 24px;
    }
}
@media screen and (max-width: 885px) {
    .footerContainer {
        flex-direction: column;
    }
}
@media screen and (max-width: 820px) {
    .newsArticle {
        width: calc(50% - 8px);
    }

    .searchContainer .newsArticle {
        width: calc(50% - 8px);
    }
}
@media screen and (max-width: 768px) {
    .newsBanner:before {
        padding-bottom: 50%; /*(height/width)*100*/
    }
    .imagePanel .standartWide2 {
        width: 100%;
    }
    .panelInfo {
        width: 100%;
    }
    .card {
        width: 100%;
        padding: 0.8rem;
    }
    .details-column {
        width: 100%;
        padding: 0;
    }
    .contact-item {
        margin: 0;
    }
    .newsContainer {
        padding-top: 16px;
    }
}
@media screen and (max-width: 640px) {
    .logo {
        font-size: 38px;
    }
    .searchBtn,
    .second_searchBtn {
        font-size: 16px;
    }
    .search input,
    .searchInput {
        padding: 6px 10px;
    }

    .newsBanner:before {
        padding-bottom: 62.5%; /*(height/width)*100*/
    }
}
@media screen and (max-width: 576px) {
    .newsArticles > div {
        gap: 20px;
    }
    .newsArticle {
        width: 100%;
    }

    .searchContainer .newsArticle {
        width: 100%;
    }
    .imagePanel {
        margin: 0;
    }
    .submit-button {
        font-size: var(--small-font-size);
    }
    .logo {
        font-size: 30px;
        line-height: 1.1em;
    }

    .error-content h1 {
        font-size: 6rem;
    }
    .error-content p {
        font-size: 1rem;
        margin: 5px 0;
    }
    .home-button {
        padding: 8px 16px;
        font-size: 0.8rem;
        line-height: 150%;
        margin-top: 10px;
    }
}
@media screen and (max-width: 375px) {
    .link {
        padding: 12px 15px;
        font-size: var(--small-font-size);
    }

    .articleInfo {
        padding: 8px;
    }
    header:before {
        min-height: 200px;
    }
    .headerContainer .top {
        padding: 20px 0;
        gap: 16px;
    }
    .firstPanel .left {
        padding-top: 20px;
    }
    .firstPanel {
        padding-bottom: 0;
    }
    .newsSection {
        margin: 20px auto;
    }
    .newsArticles {
        margin-top: 20px;
    }
    .newsArticles > div {
        gap: 16px;
    }

    .aboutContainer p {
        font-size: 14px;
    }
    .privacyList > li {
        font-size: var(--small-font-size);
    }
    .privacyList ul li {
        font-size: var(--small-font-size);
    }

    .newsContainer p {
        font-size: var(--small-font-size);
    }
    .page-link {
        font-size: 10px;
        line-height: 20px;
        min-width: 20px;
        height: 20px;
    }
    .searchForm {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .searchInput {
        margin: 0;
    }
    .logo {
        font-size: 28px;
    }
}
@media screen and (max-width: 320px) {
    .pagination {
        flex-wrap: wrap;
        gap: 5px;
    }
    .panelLink h2 {
        padding: 0 12px;
        bottom: 12px;
    }
    .bottom {
        justify-content: space-between;
    }
    .link {
        padding: 10px;
        white-space: nowrap;
        font-size: var(--small-font-size);
    }
    .searchBtn,
    .second_searchBtn {
        font-size: 14px;
    }
    .search input,
    .searchInput {
        font-size: 14px;
    }
    .logo {
        font-size: 24px;
    }
}