/*Panel 2*/
.panel-2 {
    border-bottom: 1px solid var(--purple);
    border-top: 1px solid var(--purple);
    display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.panel-2 div {
    width: 100%;
        max-width: 600px;
}

/*Panel 3*/
.panel-3, .panel-5-grid {
    color: var(--white);
    display: grid;
        grid-gap: 10px;
    justify-content: center;

}

.panel-3 {
    grid-template-columns: repeat(2, 400px);
        grid-template-rows: repeat(2, 400px);
        grid-template-areas:
            "hc ww"
            "dq dq";
}

.faculty-pic {
    background-color: #554e5f;
    background-position: center center;
    background-size: cover;
    display: flex;
        justify-content: center;
        align-items: center;
    text-align: center;
}

#callus {
    background-image: url(/img/helen-callus-square.jpg);
    grid-area: hc;
}

#wang {
    background-image: url(/img/weijing-wang.jpg);
    grid-area: ww;
}

#dover {
    background-image: url(/img/dover-quartet.jpeg);
    background-position: top -100px center;
    grid-area: dq;
}

.panel-3 div:hover, .panel-5-grid div:hover {
    opacity: 0.6;
    background-blend-mode: multiply;
}

.faculty-link {
    display: flex;
        flex-direction: column;
        justify-content: center;
    height: 100%;
    width: 100%;
}

.panel-3 div div, .panel-5-grid div div {
    display: none;
}

.panel-3 div:hover div, .panel-5-grid div:hover div {
    display: block;
    opacity: 1;
}

.panel-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.panel-5 h1 {
    margin: 1em 0;
}

#dai {
    background-image: url(/img/kunjing-dai.jpeg);
    grid-area: kd;
}

#kang {
    background-image: url(/img/james-kang-square.JPG);
    grid-area: jk;
}

.panel-5-grid {
    grid-template-columns: repeat(2, 400px);
        grid-template-rows: 400px;
        grid-template-areas:
            "kd jk";
    width: 100%;
}

/*Media Queries*/
@media only screen and (max-width: 860px) {
    .panel-3 {
        grid-template-columns: 100%;
        grid-template-rows: repeat(3, 400px);
        grid-template-areas: 
            "hc"
            "ww"
            "dq";
    }

    .panel-5-grid {
        grid-template-columns: 100%;
        grid-template-rows: repeat(2, 400px);
        grid-template-areas: 
            "kd"
            "jk";
    }
}