@import url("./styles.css");

@media screen and (max-width: 1254px) {
    .backgroundNews {
        top: -275px;
    }
}
@media screen and (max-width: 1120px) {
    .firstPanel {
        padding: 0 16px 25px;
    }
    .firstPanel .left {
        padding: 25px 0 0;
        width: 60%;
    }
    .firstPanel .right {
        width: 40%;
    }
    .darkBlock .panelLink {
        width: 100%;
    }

    .darkBlock p,
    .darkBlock h5 {
        display: none;
    }
    .darkBlock .darkblockTitle {
        display: block;
    }
}
@media screen and (max-width: 960px) {
    .firstPanel .left {
        width: 100%;
    }
    .firstPanel .right {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px;
        background-color: var(--darkGrey);
        gap: 10px 2%;
    }
    .darkBlock .darkblockTitle {
        padding: 0 10px;
        bottom: 10px;
    }
    .darkBlock {
        width: 49%;
        padding: 0;
    }
    .search {
        width: 100%;
    }
    .searchBtn {
        padding: 4px 10px;
    }
    .second_searchBtn {
        padding: 4px 10px;
    }
    /* Burger menu */
    .burger {
        display: flex;
        order: 1;
    }
    .headerContainer .top .search {
        order: 2;
    }
    .bottom {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        padding: 90px 0 24px;
        z-index: 1001;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        background-color: var(--darkGrey);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transition:
            visibility 0.25s ease,
            opacity 0.25s ease;
        gap: 0;
    }
    body.nav-open .bottom {
        visibility: visible;
        opacity: 1;
    }
    .nav-close {
        display: none;
    }
    .nav-close-bottom {
        display: flex;
        position: absolute;
        top: auto;
        right: auto;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--white);
        cursor: pointer;
        z-index: 1002;
        transition: var(--transition);
    }
    .nav-close-bottom:hover {
        color: var(--green);
    }
    .nav-close-x {
        font-size: 32px;
        font-weight: 300;
        line-height: 1;
    }
    .nav-inner {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
    }
    .bottom .link {
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
        text-align: left;
        justify-content: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.nav-open .nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .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: 768px) {
    .bottom {
        padding: 8px 12px;
        gap: 4px;
    }
    .bottom .link {
        padding: 12px 16px;
        font-size: var(--standard-font-size);
    }
}
@media screen and (max-width: 640px) {
    .logo {
        font-size: 38px;
    }
    .bottom {
        padding: 8px 10px;
        gap: 4px;
    }
    .bottom .link {
        padding: 10px 12px;
        font-size: 14px;
    }
    .searchBtn,
    .second_searchBtn {
        font-size: 16px;
    }
    .search input,
    .searchInput {
        padding: 6px 10px;
    }

    .newsBanner:before {
        padding-bottom: 62.5%; /*(height/width)*100*/
    }
    .js-cookie-consent {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: unset;
    }
}
@media screen and (max-width: 576px) {
    .bottom {
        padding: 6px 10px;
        gap: 4px;
    }
    .bottom .link {
        padding: 10px 12px;
        font-size: 13px;
    }
    .newsArticles > div {
        gap: 20px;
    }
    .newsArticle {
        width: 100%;
    }
    .backgroundNews {
        top: -244px;
    }

    .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;
    }
    .panelLink h2 {
        padding: 0 10px;
        bottom: 10px;
    }
    .darkBlock {
        width: 100%;
    }

    .firstPanel .right {
        background-color: var(--white);
        gap: 20px;
        padding: 20px 0 0 0;
    }
}
@media screen and (max-width: 375px) {
    .bottom {
        padding: 6px 8px;
        gap: 4px;
    }
    .bottom .link,
    .link {
        padding: 10px 12px;
        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;
    }
    .privacyContainer > p,.privacyContainer > p b,.privacyContainer a {
        font-size: var(--small-font-size);
    }
    .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;
    }

    .backgroundNews {
        top: -166px;
    }
}
@media screen and (max-width: 320px) {
    .pagination {
        flex-wrap: wrap;
        gap: 5px;
    }
    .panelLink h2 {
        padding: 0 12px;
        bottom: 12px;
    }
    .bottom {
        padding: 6px 8px;
        gap: 4px;
        justify-content: flex-start;
    }
    .bottom .link,
    .link {
        padding: 8px 10px;
        white-space: nowrap;
        font-size: 12px;
    }
    .searchBtn,
    .second_searchBtn {
        font-size: 14px;
    }
    .search input,
    .searchInput {
        font-size: 14px;
    }
    .logo {
        font-size: 24px;
    }
    .backgroundNews {
        top: -157px;
    }
}