@media only screen and (max-width: 840px) {
    .mission_values.active {
        flex-direction: column;
    }

    .left_value {
        width: 100%;
    }

    .right_value {
        width: 100%;
        aspect-ratio: 5/2;
    }

    .mission_text {
        padding-top: 16px;
        padding-bottom: 32px;
    }

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

    .left_project_image {
        display: block;
        width: calc(100% - 20px);
        height: 50%;
    }

    .right_project_info {
        width: calc(100% - 20px);
        height: 100%;
    }

    .subnav{
        display: none;
    }

    .entry {
        max-width: 580px;
    }

    .triplegrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .triplegrid a:last-child {
        display: none;
    }
}

@media only screen and (max-width: 720px) {
    .fourgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    section {
        flex-direction: column-reverse;
    }

    .left_side {
        width: 100%;
        height: calc(100vh - 54px);
    }

    .right_side {
        width: 100%;
        height: 54px;
    }
}