.project-card{
    display: grid;
    grid-template-areas: "project-logo project-title" "project-logo project-description" "project-action project-action";
    grid-template-rows: auto max-content auto;
    grid-template-columns: max-content 1fr;
    grid-column-gap: var(--primary-spacing);
    grid-row-gap: var(--secondary-spacing);
    margin: var(--primary-spacing) 0px;
    padding: var(--primary-spacing);
    border-radius: var(--card-border-radius);
    background-color: #FAFAFA;
}

.project-logo{
    grid-area: project-logo;
    object-fit: contain;
    max-width: 128px;
    max-height: 128px;
    border: 1px solid black;
}
.project-logo > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-title{
    grid-area: project-title;
    display: flex;
    margin-bottom: 0px;
    color: black;
}
.project-title > span{
    display: inline-block;
    align-self: flex-end;
}

.project-description{
    grid-area: project-description;
    text-align: justify;
    font-weight: 300;
}

.project-action{
    grid-area: project-action;
    justify-self: end;
}
.project-action button{
    border-color: var(--accent-color);
    background-color: var(--accent-color);
}
.project-action button:hover{
    border-color: var(--accent-color);
    background-color: var(--accent-color);
}

/* ===== SINGLE PROJECT PAGE ===== */
#project-container{
    display: grid;
    grid-template-areas: "project-logo project-title" 
                         "project-description project-description"
                         "project-gallery project-gallery"
                         "project-partners project-partners";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    grid-column-gap: var(--primary-spacing);
    grid-row-gap: var(--primary-spacing);
}

#project-container .project-description{
    margin: 0px;
}

#project-gallery{
    grid-area: project-gallery;
}

#project-partners{
    grid-area: project-partners;
}

#project-gallery > .pane-title,
#project-partners > .pane-title{
    margin-bottom: var(--primary-spacing);
}

#partners-container{
    grid-area: project-partners;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    overflow-x: auto;
}
#partners-container .partner-card{
    margin: 0px var(--primary-spacing);
}

/* ===== RESPONSIVE HANDLERS ===== */
@media(max-width: 768px){
    .project-card{
        grid-template-areas: "project-logo project-title" "project-description project-description" "project-action project-action";
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
}