*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    min-width: 320px;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

table {
    max-width: 100%;
}

:where(
    .front-page,
    .about-page,
    .contacts-page,
    .documents-page,
    .knowledge-page,
    .mission-vision-page,
    .our-tasks-page,
    .program-page,
    .project-detail-page,
    .school-project-page,
    .sun-school-page,
    .team-page
) {
    overflow-x: clip;
}

:where(
    .home-container,
    .about-container,
    .contacts-container,
    .documents-container,
    .knowledge-container,
    .mission-container,
    .mv-container,
    .tasks-container,
    .program-container,
    .program-process,
    .project-detail-container,
    .school-container,
    .sun-container,
    .team-container
) {
    max-width: 100%;
}

.site-footer .container,
main .container {
    max-width: 100%;
}

:where(
    .about-page h1,
    .contacts-page h1,
    .documents-page h1,
    .knowledge-page h1,
    .mission-vision-page h1,
    .our-tasks-page h1,
    .program-page h1,
    .project-detail-page h1,
    .school-project-page h1,
    .sun-school-page h1,
    .team-page h1
) {
    overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
    :where(
        .home-container,
        .about-container,
        .contacts-container,
        .documents-container,
        .knowledge-container,
        .mission-container,
        .mv-container,
        .tasks-container,
        .program-container,
        .program-process,
        .project-detail-container,
        .school-container,
        .team-container
    ) {
        width: calc(100vw - 48px);
    }

    main .container {
        max-width: calc(100vw - 48px);
    }

    .sun-container,
    .sun-school-page .container,
    .contact-section,
    .footer-main {
        width: calc(100vw - 48px);
        max-width: none;
    }

    .footer-main .prefooter,
    .footer-main .prefooter-inner {
        max-width: none;
        width: 100%;
    }

    .home-video {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    }

    .home-video__brand {
        grid-column: 1 / -1;
        padding-top: 0;
    }

    .contacts-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 42px;
    }

    .pmi-inner .container,
    .project-scale .container {
        width: calc(100vw - 48px);
    }
}

@media (max-width: 1100px) {
    .home-projects,
    .tasks-hero__media-grid,
    .community-top,
    .project-detail-hero,
    .school-hero__grid,
    .school-split,
    .mv-hero,
    .mv-grid,
    .mv-global__grid,
    .program-prep__body,
    .program-donor,
    .sun-hero__grid,
    .sun-story,
    .sun-block-grid,
    .sun-chart-grid,
    .team-founder,
    .footer-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .school-hero__grid,
    .school-split,
    .program-donor,
    .team-founder {
        gap: 34px;
    }

    .home-project,
    .tasks-program-card,
    .school-project-image,
    .project-detail-hero__image,
    .contact-address,
    .contact-email {
        min-height: auto;
    }

    .program-steps,
    .program-tables,
    .school-stats__grid,
    .school-installed__grid,
    .team-members__grid,
    .knowledge-story-grid,
    .mission-values__grid,
    .mv-cards,
    .contacts-reasons-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-contact {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    :where(
        .home-container,
        .about-container,
        .contacts-container,
        .documents-container,
        .knowledge-container,
        .mission-container,
        .mv-container,
        .tasks-container,
        .program-container,
        .program-process,
        .project-detail-container,
        .school-container,
        .team-container
    ) {
        width: calc(100vw - 32px);
    }

    main .container,
    .pmi-inner .container,
    .project-scale .container {
        max-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
    }

    .sun-container,
    .sun-school-page .container,
    .contact-section,
    .footer-main {
        width: calc(100vw - 32px);
    }

    :where(
        .about-page,
        .contacts-page,
        .documents-page,
        .knowledge-page,
        .mission-vision-page,
        .mission-page,
        .our-tasks-page,
        .program-page,
        .project-detail-page,
        .school-project-page,
        .sun-school-page,
        .team-page
    ) {
        padding-top: 108px;
    }

    :where(
        .about-page h1,
        .contacts-page h1,
        .documents-page h1,
        .knowledge-page h1,
        .mission-vision-page h1,
        .mission-page h1,
        .our-tasks-page h1,
        .program-page h1,
        .project-detail-page h1,
        .school-project-page h1,
        .team-page h1
    ) {
        font-size: clamp(40px, 8vw, 56px);
        line-height: 1.04;
    }

    .sun-school-page h1 {
        font-size: clamp(42px, 8vw, 64px);
    }

    :where(
        .about-page h2,
        .contacts-page h2,
        .documents-page h2,
        .knowledge-page h2,
        .mission-vision-page h2,
        .mission-page h2,
        .our-tasks-page h2,
        .program-page h2,
        .project-detail-page h2,
        .school-project-page h2,
        .team-page h2
    ) {
        font-size: clamp(30px, 5.5vw, 38px);
        line-height: 1.08;
    }

    .home-video,
    .home-projects,
    .about-intro,
    .about-feature,
    .about-feature--reverse,
    .contacts-info-grid,
    .documents-hero__grid,
    .documents-grid,
    .knowledge-story-grid,
    .mission-hero__grid,
    .mv-hero,
    .mv-grid,
    .mv-global__grid,
    .mission-focus-grid,
    .mission-goals__grid,
    .tasks-hero__intro,
    .tasks-hero__media-grid,
    .tasks-cards,
    .education-grid,
    .community-grid,
    .timeline-grid,
    .program-steps,
    .program-tables,
    .program-budget,
    .program-donor__items,
    .project-detail-section,
    .project-detail-section--reverse,
    .project-detail-cards,
    .school-hero__grid,
    .school-stats__grid,
    .school-split,
    .school-installed__grid,
    .school-gallery__grid,
    .school-cta,
    .sun-hero__grid,
    .sun-results-grid,
    .sun-step-cards,
    .sun-two-col,
    .sun-donor-grid,
    .team-founder,
    .team-members__grid,
    .pmi-grid,
    .pmi-row,
    .pmi-bottom,
    .footer-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .about-history-item,
    .school-timeline article {
        grid-template-columns: 1fr;
    }

    .home-video {
        min-height: auto;
        padding: 64px 0;
    }

    .home-video__media,
    .home-video__brand {
        justify-self: center;
    }

    .home-project--text p {
        margin-top: 36px;
    }

    .contacts-hero__mark,
    .documents-hero__mark {
        opacity: 0.42;
        pointer-events: none;
        right: 0;
        top: 10px;
        width: min(44vw, 240px);
    }

    .contacts-info-grid,
    .documents-grid,
    .contacts-reasons-grid {
        gap: 18px;
    }

    .program-prep,
    .program-included,
    .program-plan,
    .school-stats,
    .school-economy,
    .school-timeline,
    .school-installed,
    .sun-card,
    .sun-panel,
    .contact-section,
    .footer-main {
        border-radius: 20px;
        padding: 28px;
    }

    .program-table-shell,
    .program-plan,
    .program-table-card,
    .school-specs,
    .sun-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .program-tables table,
    .program-plan table,
    .program-table-shell table,
    .school-specs table,
    .sun-table-wrap table {
        min-width: 620px;
    }

    .contact-grid {
        gap: 16px;
    }

    .contact-email {
        min-height: 420px;
    }

    .contact-address {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    body {
        margin: 0;
    }

    :where(
        .home-container,
        .about-container,
        .contacts-container,
        .documents-container,
        .knowledge-container,
        .mission-container,
        .mv-container,
        .tasks-container,
        .program-container,
        .program-process,
        .project-detail-container,
        .school-container,
        .team-container
    ) {
        width: calc(100vw - 24px);
    }

    main .container,
    .pmi-inner .container,
    .project-scale .container {
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
    }

    .sun-container,
    .sun-school-page .container,
    .contact-section,
    .footer-main {
        width: calc(100vw - 16px);
    }

    :where(
        .about-page h1,
        .contacts-page h1,
        .documents-page h1,
        .knowledge-page h1,
        .mission-vision-page h1,
        .mission-page h1,
        .our-tasks-page h1,
        .program-page h1,
        .project-detail-page h1,
        .school-project-page h1,
        .team-page h1
    ) {
        font-size: clamp(34px, 11vw, 42px);
        letter-spacing: 0;
    }

    .sun-school-page h1,
    .home-hero h1 {
        font-size: clamp(38px, 11vw, 48px);
        letter-spacing: 0;
    }

    :where(
        .about-page h2,
        .contacts-page h2,
        .documents-page h2,
        .knowledge-page h2,
        .mission-vision-page h2,
        .mission-page h2,
        .our-tasks-page h2,
        .program-page h2,
        .project-detail-page h2,
        .school-project-page h2,
        .team-page h2
    ) {
        font-size: clamp(28px, 8vw, 34px);
    }

    :where(
        .about-page p,
        .contacts-page p,
        .documents-page p,
        .knowledge-page p,
        .mission-vision-page p,
        .mission-page p,
        .our-tasks-page p,
        .program-page p,
        .project-detail-page p,
        .school-project-page p,
        .sun-school-page p,
        .team-page p,
        .about-page li,
        .contacts-page li,
        .documents-page li,
        .knowledge-page li,
        .mission-vision-page li,
        .mission-page li,
        .our-tasks-page li,
        .program-page li,
        .project-detail-page li,
        .school-project-page li,
        .sun-school-page li,
        .team-page li
    ) {
        font-size: min(17px, 4.8vw);
    }

    .home-hero__content {
        padding: 108px 18px 0;
    }

    .home-project__stats,
    .home-donate__amounts,
    .footer-bottom-inner,
    .prefooter-actions {
        grid-template-columns: 1fr;
    }

    .home-donate h2 {
        font-size: 30px;
        max-width: 10ch;
    }

    .home-donate__inner {
        padding: 54px 12px 46px;
    }

    .home-donate__card {
        padding: 22px;
    }

    .program-interest,
    .footer-bottom-inner,
    .prefooter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .program-interest a,
    .school-cta a,
    .btn-donate,
    .btn-outline {
        justify-content: center;
        width: 100%;
    }

    .program-prep,
    .program-included,
    .program-plan,
    .school-stats,
    .school-economy,
    .school-timeline,
    .school-installed,
    .school-cta,
    .sun-card,
    .sun-panel,
    .contact-section,
    .footer-main {
        padding: 22px;
    }

    .contacts-reason-card,
    .documents-card,
    .mission-card,
    .tasks-card,
    .program-steps article,
    .team-member-card {
        padding: 20px;
    }

    .contacts-info-grid {
        gap: 28px;
    }

    .contacts-socials,
    .contact-socials {
        min-height: 56px;
    }

    .contacts-socials a,
    .contact-socials a {
        flex: 0 0 46px;
        height: 46px;
        transform-origin: center;
        width: 46px;
    }

    .contacts-socials a:hover,
    .contact-socials a:hover {
        transform: scale(1.08);
    }

    .documents-card {
        min-height: 260px;
    }

    .footer-legal ul,
    .footer-bottom-inner,
    .footer-legal #menu-bottom-links,
    .footer-legal #menu-bottom-links-en {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-legal a {
        margin-right: 0;
    }

    .footer-copy {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .site-header.is-scrolled,
    .site-header {
        width: calc(100vw - 8px);
    }

    .header-container {
        margin: 0 12px;
    }

    .site-logo img,
    .mobile-logo img {
        max-width: 145px;
    }

    .donate-btn {
        display: none;
    }

    .home-project--text,
    .contacts-reason-card,
    .documents-card,
    .knowledge-card,
    .mission-card,
    .tasks-card,
    .program-steps article,
    .team-member-card {
        border-radius: 14px;
    }

    .program-table-shell,
    .program-plan,
    .school-specs {
        margin-left: -4px;
        margin-right: -4px;
        width: calc(100% + 8px);
    }

    .contact-email {
        min-height: 360px;
    }

    .contact-address {
        min-height: auto;
    }
}