.person-card{
    display: grid;
    grid-template-areas: "person-pic person-name person-role" "person-pic person-bio person-bio";
    grid-template-rows: auto max-content;
    grid-template-columns: max-content max-content 1fr;
    grid-column-gap: var(--primary-spacing);
    margin: var(--primary-spacing) 0px;
    padding: 20px;
    border-radius: var(--card-border-radius);
    background-color: #FAFAFA;
}

.person-card > p{
    margin: 0px;
}

.person-pic{
    grid-area: person-pic;
    border-radius: 50%;
    width: 84px;
    height: 84px;
    object-fit: cover;
}
.person-name{
    grid-area: person-name;
    font-weight: bold;
}
.person-name > span{
    display: inline-block;
}
.person-role{
    grid-area: person-role;
    color: var(--accent-color);
    text-transform: lowercase;
}
.person-bio{
    grid-area: person-bio;
    text-align: justify;
    margin-bottom: var(--primary-spacing);
    font-weight: 300;
}

/* ===== RESPONSIVE HANDLERS ===== */
@media(max-width: 768px){
    .person-card{
        grid-template-areas: "person-pic sink" "person-pic person-name" "person-pic person-role" "person-bio person-bio";
        grid-template-columns: auto 1fr;
        grid-template-rows: min-content min-content auto 1fr;
        grid-column-gap: var(--primary-spacing);
        grid-row-gap: 0px
    }
    .person-bio{
        margin-top: var(--primary-spacing);
    }
    .person-name, .person-role {
        height: min-content;
    }
    .person-name > span{
        display: block;
    }
}