@media only screen and (min-width: 1365px) {
    .container {
        width: 1300px;
    }

    .mainTop .mainLogo {
        order: 1;
    }

    .mainTop .mainMenu {
        order: 2;
    }

    .mainTop .userPannel {
        order: 3;
    }
    .mainTop .mainSearch {
        order: 4;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1364px) {
    .container {
        width: 1100px;
    }
    .mainTop .mainLogo a,
    .mainTop .mainLogo a:link,
    .mainTop .mainLogo a:visited {
        width: 200px;
    }
    .mainTop .userPannel {
        margin-right: 150px;
    }
    .mainTop .mainLogo {
        order: 1;
    }

    .mainTop .mainMenu {
        order: 2;
    }

    .mainTop .userPannel {
        order: 3;
    }
    .mainTop .mainSearch {
        order: 4;
    }
    .main-article {
        padding: 20px;
    }
    .main-article .cover {
        width: 45%;
    }

    .main-article .articles {
        padding: 20px 10%;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
    .container {
        width: 80vw;
    }
    .menu-toggle {
        display: flex;
    }

    .mainTop {
        padding: 0;
        height: 80px;
        overflow: hidden;
    }

    .mainTop.hamburger {
        height: auto;
        transition: all 0.2s;
    }

    .mainTop .mainLogo {
        padding-top: 10px;
    }

    .mainTop .container {
        flex-direction: column;
        align-items: start;
        position: relative;
    }
    .mainTop .mainMenu .mainNav ul {
        display: flex;
        flex-direction: column;
    }

    .mainTop .mainLogo a,
    .mainTop .mainLogo a:link,
    .mainTop .mainLogo a:visited {
        display: inline-block;
        width: 150px;
        height: 60px;
    }
    .mainTop .menu-toggle {
        display: flex;
    }

    .mainTop .mainSearch {
        position: absolute;
        top: 20px;
        left: 50px;
        z-index: 10;
    }
    .mainTop .userPannel {
        position: absolute;
        top: 25px;
        left: 120px;
        z-index: 1;
    }

    .mainMenu {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
    }
    .mainNav ul {
        width: 100%;
    }
    .mainNav li {
        display: block;
        width: 100%;
    }
    .mainNav li a,
    .mainNav li a:link,
    .mainNav li a:visited {
        display: block;
        width: 100%;
    }

    .footer-container > * {
        flex-shrink: 0;
    }
    .footer-links {
        flex-wrap: nowrap;
        gap: 0;
        justify-content: space-between;
    }
    .link-column > * {
        white-space: nowrap;
        word-wrap: normal;
    }
}

@media only screen and (max-width: 768px) {
    .container {
        width: 95vw;
    }

    .menu-toggle {
        display: flex;
    }

    .mainTop {
        padding: 0;
        height: 80px;
        overflow: hidden;
    }

    .mainTop.hamburger {
        height: auto;
        transition: all 0.2s;
    }

    .mainTop .mainLogo {
        padding-top: 10px;
    }

    .mainTop .container {
        flex-direction: column;
        align-items: start;
        position: relative;
    }
    .mainTop .mainMenu .mainNav ul {
        display: flex;
        flex-direction: column;
    }

    .mainTop .mainLogo a,
    .mainTop .mainLogo a:link,
    .mainTop .mainLogo a:visited {
        display: inline-block;
        width: 150px;
        height: 60px;
    }
    .mainTop .menu-toggle {
        display: flex;
    }

    .mainTop .mainSearch {
        position: absolute;
        top: 20px;
        left: 50px;
        z-index: 10;
    }
    .mainTop .userPannel {
        position: absolute;
        top: 25px;
        left: 120px;
        z-index: 1;
    }

    .mainMenu {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
    }
    .mainNav ul {
        width: 100%;
    }
    .mainNav li {
        display: block;
        width: 100%;
    }
    .mainNav li a,
    .mainNav li a:link,
    .mainNav li a:visited {
        display: block;
        width: 100%;
    }
    .mainSearch.active .search-form .search-input {
        width: 45vw;
    }
    .footer-container {
        flex-direction: column;
    }
    .footer-brand {
        flex: 1.5;
        min-width: 220px;
        width: 100%;
    }

    .brand-desc {
        font-size: 0.9rem;
        line-height: 1.6;
        opacity: 0.8;
        margin-bottom: 1.2rem;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .footer-newsletter {
        flex: 1.2;
        min-width: 240px;
        width: 100%;
    }

    .newsletter-note {
        font-size: 0.7rem;
        opacity: 0.6;
        margin-top: 0.7rem;
        width: 100%;
    }

    .footer-logo,
    .social-links {
        justify-content: center;
    }
    .footer-links {
        justify-content: center;
        gap: 10px;
    }
    .footer-bottom {
        justify-content: center;
        gap: 10px;
        font-size: .7rem;
    }
}