#project_hero {
    position: relative;
    width: 100%;
}
#project_summary {
    position: relative;
    width: 100%;
}
#project_title {
    height: 80px;
    width: 390px;
    text-transform: uppercase;
    line-height: 32px;
    font-size: 36px;
    font-weight: 900;
}
#project_info {
    display: flex;
}
#project_details {
    display: flex;
    flex-direction: column;
    margin-top: 22px;
}
.detail {
    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
}
.detail_label {
    width: 195px;
    font-weight: 900;
    text-transform: uppercase;
}
.detail_items {
    display: flex;
    flex-direction: column;
    width: 195px;
}
.detail_items div {
    height: 28px;
}
#project_body_text {
    position: relative;
    margin-top: 22px;
}
.project_section {
    position: relative;
    width: 100%;
    margin-top: 80px;
    padding-bottom: 80px;
}
.project_section .text_block {
    position: relative;
    margin-left: 390px;
    margin-top: 22px;
    margin-bottom: 80px;
}
.project_media {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 80px;
    filter: drop-shadow(0px 4px 4px #20252d55);
}
.project_media video {
    object-fit: cover;
}
.frame {
    user-select: none;
    transition: auto;
    background-color: #20252D;
    overflow: hidden;
}
.frame video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.frame img {
    position: absolute;
    top: 50%;
    left: 50%;
}
.frame .button_mount {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
.frame .button {
    transform: translate(-50%, -50%) scale(100%);
    transition: transform .2s cubic-bezier(0.23, 1, 0.320, 1);
}
.project_media_double {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-left: 130px;
    margin-bottom: 80px;
    height: 480px;
    width: 1040px;
    border-radius: 20px;
}
.project_media_double img, .project_media_double video {
    position: relative;
    transform: none;
    top: auto;
    left: auto;
}
#img_placeholder {
    opacity: 0;
}
#blob1, #blob2 {
    position: absolute;
}
@media (max-width: 989px) { /*mobile*/
    #project_hero {
        height: calc((100vw - 84px) / 318px * 440px);
    }
    .project_media {
        margin-top: 0px;
        margin-left: 0px;
        height: calc((100vw - 84px) / 318px * 400px);
        width: 100%;
    }
    .project_media video, .project_media img {
        width: 240%;
        transform: translate(-50%, -50%);
    }
    #blob1 {
        top: calc((100vw - 84px) / 318px * 40px);
        right: -42px;
        height: calc((100vw - 84px) / 318px * 240px);
        width: 50vw;
    }
    #blob2 {
        bottom: calc((100vw - 84px) / 318px * 80px);
        left: -42px;
        height: calc((100vw - 84px) / 318px * 240px);
        width: 50vw;
    }
    #project_title {
        margin-left: 0px;
        width: 100%;
    }
    #project_info {
        flex-direction: column;
    }
    #project_details {
        margin-left: 0px;
    }
    #project_body_text {
        margin-left: 0px;
    }
    .project_media_double {
        flex-direction: column;
        margin-left: 0px;
        height: calc((100vw - 84px) / 318px * 586px);
        width: 100%;
    }
    .project_media_double img, .project_media_double video {
        height: auto;
        width: 100%;
    }
    .project_section .text_block {
        margin-left: 0px;
    }
    #zoom {
        display: none;
    }
}
@media (min-width: 990px) { /*desktop narrow*/
    #project_hero {
        height: 400px;
    }
    .project_media {
        margin-top: 40px;
        margin-left: 65px;
        height: 360px;
        width: 780px;
    }
    .project_media video, .project_media img {
        width: 100%;
        transform: translate(-50%, -50%);
    }
    #blob1 {
        top: -40px;
        right: 0px;
        height: 360px;
        width: 260px;
    }
    #blob2 {
        bottom: 80px;
        left: 0px;
        height: 200px;
        width: 130px;
    }
    #project_title {
        margin-left: 65px;
    }
    #project_info {
        flex-direction: column;
    }
    #project_details {
        margin-left: 65px;
    }
    #project_body_text {
        margin-left: 260px
    }
    .project_media_double {
        margin-left: 65px;
        height: 360px;
        width: 780px;
    }
    .project_media_double img, .project_media_double video {
        height: auto;
        width: 100%;
    }
    .project_section .text_block {
        margin-left: 195px;
    }
    #zoom {
        display: flex;
    }
}
@media (min-width: 1380px) { /*full desktop*/
    #project_hero {
        height: 520px;
    }
    .project_media {
        margin-top: 40px;
        margin-left: 130px;
        height: 480px;
        width: 1040px;
    }
    .project_media video, .project_media img {
        width: 100%;
        transform: translate(-50%, -50%);
    }
    #blob1 {
        top: -40px;
        right: 0px;
        height: 440px;
        width: 445px;
    }
    #blob2 {
        bottom: 80px;
        left: 0px;
        height: 320px;
        width: 260px;
    }
    #project_title {
        margin-left: 130px;
    }
    #project_info {
        flex-direction: row;
    }
    #project_details {
        margin-left: 130px;
    }
    #project_body_text {
        margin-left: 130px
    }
    .project_media_double {
        margin-left: 130px;
        height: 480px;
        width: 1040px;
    }
    .project_section .text_block {
        margin-left: 390px;
    }
}