main {
    min-height: 830px;
    background-color: #efeffa;
    padding-top: 64px;
    padding-bottom: 64px;
}

section {
    margin: 0 auto 0;
    width: 726px;
}

.project {
    background-color: #fbfbfb;    
    box-shadow: -10px 10px 24px 0px rgba(138,131,124,0.23);    
    min-height: 404px;
}

.separator {
    height: 1px;
    margin: 20px 30px 0px 30px;
    background-color: #ccc;
}

.project_section {
    display: flex;
    flex-direction: column;
}

.project_section_header {
    display: flex;
    margin-top: 20px;
}

.project_section_header .logo {
    background-color: #335384;
    width: 10px;
}

.project_section_header .project_section_title {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

.project_section_header .project_section_title .name {
    font-size: 20px;
    font-weight: 600;
    color: #335384;
}

.project_section_header .project_section_title .subname {
    font-weight: 400;
    margin-top: 4px;
}

.project_intro .project_description {    
    padding-top: 20px;
    padding-right: 30px;
    padding-left: 30px;
    font-weight: 300;
    line-height: 30px;
}

.project_intro .project_logo {    
    background-color: aqua;
    width:100%;
    height:200px;
}

.project_intro .project_logo .center_cropped {
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
}

.bullet_points_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 30px 20px 30px;
}

.bullet_points_list.single_column {
    flex-direction: column;
}

.bullet_points_list > div {
    display: flex;
    flex-basis: 50%;
    flex-grow: 1;
    margin-top: 36px;
}

.bullet_points_list.single_column .content div:last-child {
    line-height: 30px;
}

.bullet_points_list .logo {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin-right: 10px;
    margin-top: 2px;
    background-color: #335384;
}

.bullet_points_list .content {
    display: flex;
    flex-direction: column;
}

.bullet_points_list .content div:first-child {
    font-weight: 600;
    margin-bottom: 4px;
}

.bullet_points_list .content div:last-child {
    font-weight: 300;
}

.project_screenshots .screenshots_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 36px 30px 20px 30px;
}

.project_screenshots .screenshots_list img {    
    width: 100%;
    height: auto;
    display: block;
}

.project_download:last-child {
    padding-bottom: 20px;
}

.project_download .download_links {
    display: flex;
    flex-direction: row;    
    margin-top: 36px;
    justify-content: center;
    gap: 40px;
}

.project_download .download_links img {
    height: 40px;
}

.timeline {
    display: flex;
    flex-direction: column;
    padding: 36px 30px 20px 30px;
}

.timeline .title_row,
.timeline .content_row {
    display: flex;
    flex-direction: row;
}

.timeline .title_row .logo {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin-top: 2px;
    background-color: #335384;
}

.timeline .content_row .line {
    background-color: #000000;
    width: 1px;
    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 7px;
    align-self: stretch;
}

.timeline .timeline_item:last-child .content_row .line {
    width: 0px;
}

.timeline .title_row .title {
    font-weight: 600;
    margin-left: 10px;
}

.timeline .content_row .content {
    font-weight: 300;
    line-height: 30px;
    margin-left: 17px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    main {
        padding-left: 16px;
        padding-right: 16px;
    }

    section {
        width: 100%;
    }

    .separator {        
        margin: 20px 24px 0px 24px;        
    }

    .project_section_header .project_section_title .name {
        font-size: 19px;
    }    

    .project_section_header .project_section_title {
        padding-left: 14px;
        padding-right: 24px;
    }

    .project_intro .project_description {
        padding-left: 24px;
        padding-right: 24px;
    }

    .project_intro .project_logo .center_cropped {
        width: 100%;
        max-width: initial;
    }

    .bullet_points_list {
        flex-direction: column;
        flex-wrap: initial;
        padding-left: 24px;
        padding-right: 24px;
    }

    .project_screenshots .screenshots_list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        padding-left: 24px;
        padding-right: 24px;
    }
}