@media screen and (max-width: 1300px) {
    .banner-text { left: 20px; }
    .mission { padding: 100px 20px; }
    .news-grid { 
        gap: 15px; 
        .news-desc { padding: 30px 15px 25px; }
    }

    .media-head {
        div { padding:  30px 10px 10px; }
        .date { font-size: 14px; line-height: 19px; margin-bottom: 20px; }
        .title { 
            font-size: 24px; 
            line-height: 28px; 
            height: unset;
            line-clamp: unset;
            -webkit-line-clamp: unset;
            overflow: unset;
        }
    }
}

@media screen and (max-width: 1150px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 1023px) {
    .menu {
        gap: 15px;
        a { 
            font-size: 12px;
            line-height: 13px;
        }
    }

    .banner { height: auto; }

    .mission-left {
        > p:first-child {
            font-size: 30px;
            line-height: 40px;
        }
        hr { margin: 10px 0; }
        div {
            font-size: 16px;
            line-height: 22px;
        }
    }

    .mission-right {
        img:first-child { width: 218px; left: unset; right: 150px; }
        img:nth-child(2) { width: 230px; top: 200px; right: 40px; left: unset; }
        img:last-child { width: 143px; }
    }

    .page-head { 
        height: 200px; 
        span {
            left: 20px; bottom: 30px;
            font-size: 30px;
        }
    }

    .content-text {
        width: calc(100% - 40px);
        margin: 0 auto 60px;
        overflow: hidden;
        &::after { width: 100%; }
    }

    .gallery-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 15px;
    }

    .media { flex-direction: column; }
    .curr-media { width: 100%; }
    .media-head {
        img { width: 300px; }
        div { width: calc(100% - 300px); }
    }

    .other-media {
        width: 100%;
        > div {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
    }
} 

@media screen and (max-width: 850px) {
    .menu { display: none; }
    #menu-toggle-button { display: flex; }
    .language-change { margin: 0 15px 0 auto; }

    .banner-text {
        right: 20px;
        padding: 10px;
        font-size: 12px;
        line-height: 16px;
        bottom: 30px;
    }

    .mission {
        padding: 40px 20px;
        gap: 30px;
        flex-direction: column;
    }

    .mission-left { width: 100%; }
    .mission-right {
        width: 380px;
        height: 345px;
    }

    .mission-right {
        img:first-child { top: 0; right: unset; left: 0; }
        img:nth-child(2) { width: 230px; top: 200px; right: 40px; left: unset; }
        img:last-child { top: 10px; }
    } 
}

@media screen and (max-width: 768px) {
    .mission-cont { padding: 50px 20px; }
    .cooperation-cont { padding-bottom: 50px; }

    .membership-cont {
        padding: 30px 20px;
        .content { flex-direction: column; gap: 30px; }
        .text { width: 100%; }
    }

    .footer-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .socials { order: 1; margin-bottom: 10px; }
    .copyright { order: 2; }
    .creator { order: 3; }

    .gallery-grid { 
        grid-template-columns: repeat(2, 1fr); 
        img { height: 200px; }
    }

    .news-grid { grid-template-columns: repeat(1, 1fr); }
    .other-media div {grid-template-columns: repeat(1, 1fr); }
}

@media screen and (max-width: 600px) {
    .media-head {
        flex-direction: column;
        img { width: 100%; border-radius: 10px 10px 0 0; }
        div {
            border-radius: 0 0 10px 10px;
            width: 100%; min-height: unset;
            padding: 30px;
        }
    }

    .share {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media screen and (max-width: 450px) {
    .banner { height: 250px; }
    .mission-right { 
        width: 100%; 
        img:first-child { width: 164px; }
    }

    .coop-slide { 
        width: 280px !important; 
        .text {
            font-size: 12px;
            line-height: 16px;
        }
        .learn-more { 
            width: 120px; height: 40px;
            font-size: 12px;
        }
    }

    .img-cont {
        span { 
            left: 20px; bottom: 20px;
            font-size: 14px; 
        }
        img { height: 300px; }
    }

    .membership-cont a { width: 100%; }

    .content-text {
        font-size: 14px;
        line-height: 19px;
    }

    .gallery-grid {
        grid-template-columns: repeat(1, 1fr);
        img { height: auto; }
    }

    .news-grid .news-card, .other-media .news-card {
        flex-direction: column;
        img {
            border-radius: 10px 10px 0 0;
            width: 100%; height: auto;
            max-height: 250px;
        }
    }

    .news-grid .news-desc, .other-media .news-desc {
        border-radius: 0 0 10px 10px;
        width: 100%;
        min-height: unset;
    }

    .media-head {
        margin-bottom: 20px;
        .date {
            font-size: 12px;
            line-height: 16px;
        }
        .title {
            font-size: 16px;
            line-height: 18px;
        }
    }
}