/* Mobile */
.person-page__header {
    margin-bottom: 1rem;
    grid-column: 1/ -1
}


.person-page__header {
    text-align: center;
    margin-bottom: 4rem;
}


.person-page__header__portrait,
.person-page__header h1,
.person-page__header h2 {
    grid-column: 2/-2;
}

.person-page__header h1 {
    margin-bottom: .25rem;
}

.person-page__header__portrait {
    max-height: calc(calc(100vw - 2rem) / 6 * 4);
    margin: 2rem 0 1rem;
}

.person-page__header__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.person-page__biography {
    overflow: hidden;
    transition: height 300ms ease;
}

.person-page__biography p:not(:last-child){
    margin-bottom: 1rem;
}

.person-page__info {
    margin: 3rem 0 5rem;
    padding: 1.5rem;
    background-color: rgb(240, 240, 240);
    border-radius: 0.5rem;
}

.person-page__publications,
.person-page__projects,
.person-page__news {
    margin-bottom: 4rem;
}

.person-page__publications h3,
.person-page__news h3,
.person-page__projects h3 {
    margin-bottom: 0.5rem;
}

.person-page button {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}
.person-page button.hidden {
    display: none;
}

.person-page__info dl {
    width: 50%;
}
.person-page__info dt {
    margin-bottom: 0.25rem;
}

.person-page__info dl:nth-child(2) dd{
    margin-bottom: 0.3rem;
}

.person-page__publications li,
.person-page__projects li,
.person-page__news li {
    margin-bottom: 2rem;
}

.article--desktop {
    display: none;
}

/* Tablet */
@media only screen and (min-width: 475px) {

    .person-page__header__portrait {
        grid-column: 4/-4;
        height: calc(calc(100vw - 2rem) / 8 * 2 - .5rem);
    }

    .person-page__biography {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        column-gap: 1rem;
    }

    .person-page__biography p {
        grid-column: 2/-2;
    }

    .person-page__info {
        margin: 4rem 12.5vw;
        display: flex;
    }

    .person-page__info dl {
        width: 50%;
    }
    .person-page__info dl:nth-child(2) dd{
        margin-bottom: 0.3rem;
    }

    .person-page__publications > ul,
    .person-page__projects > ul,
    .person-page__news > ul{
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        column-gap: 1rem;
    }

    .article--mobile {
        display: none;
    }

    .article--desktop {
        display: unset;
    }

    .person-page__publications li,
    .person-page__projects li {
        grid-column: span 4;
    }

    .person-page__news li {
        grid-column: span 2;
    }
}

/* Desktop */
@media only screen and (min-width: 1024px) {
    .person-page__header__portrait {
        grid-column: 6/-6;
    }

    .person-page__header h1,
    .person-page__header h2 {
        grid-column: 3/-3;
    }

    .person-page__header__portrait {
        max-height: calc(calc(100vw - 6rem) / 12 * 2);
    }
    
    .person-page__biography {
        grid-template-columns: repeat(12, 1fr);
        column-gap: 0.75rem;
    }

    .person-page__biography p {
        grid-column: 4/-4;
        margin-left: auto;
        margin-right: auto;
    }

    .person-page button {
        display: none;
    }

    .person-page__info {
        margin: 4rem 30vw;
    }
    
    .person-page__publications,
    .person-page__projects,
    .person-page__news {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 0.75rem;
    }

    .person-page__publications > *,
    .person-page__projects > *,
    .person-page__news > * {
        grid-column: 4/-4;
    }

    .person-page__publications ul,
    .person-page__projects ul,
    .person-page__news ul {
        display: flex;
        justify-content: space-between;
    }

    .person-page__publications li,
    .person-page__projects li,
    .person-page__news li {
        width: calc(50% - 0.5rem);
    }

    .publication-block {
        padding: 2rem 0 !important;
    }

    .article--mobile {
        display: none;
    }

    .article--desktop {
        display: unset;
    }
}

/* Desktop Large */
@media only screen and (min-width: 1440px) {
    .person-page__item {
        grid-column: span 2;
    }  
}