.directors{
    position: relative;
    .flex-grid{
        margin-top: 50px;
        display: flex;
        flex-flow: row wrap;
        column-gap: 8%;
        height: 100%;
    }
    .tile {
        flex: 0 1 28%;
        margin-bottom:7%;
        img{
            object-fit: cover;
            width: 100%;
            aspect-ratio: 1 / 1;  
            object-position: 0 20%;
        }
        
    }
    .info{
        font-size: 16px;
    }
    .name{
        margin: 20px 0 5px;
        min-height: 39px;
    }

    .link{
        i{
            color:#0077b7;
            font-size: 22px;
        }
        a{
            vertical-align: 4px;
            font-size: 14px;
        }
    }
    #overlay{
        display: flex;
        position: absolute;
        background-color: white;
        box-shadow: 0 0 5px 5px grey;
        left:-2%;
        opacity: 0;
        pointer-events: none;
        padding: 2%;
        width: 104%;
        transition: opacity 0.5s ease-out;
        .close{
            cursor: pointer;
            position: absolute;
            right:5px;
            top:5px;
            height: 20px;
            width: 20px;
            display: inline;
            padding: 3px;
            text-align: center;
            vertical-align: middle;
            background-color:gray;
            i{
                color:white;
            }
        }


        top:0;
        .info{
            margin: 20px;
            flex-basis: 65%;
            .name{
                margin:0 ;
                font-weight: bold;
                text-transform: uppercase;
            }
            .title{
                font-weight: bold;
                margin-bottom:20px;
            }
            .bio{
                font-size: 14px;
            }
    
        }

        .img_wrap{
            position: relative;
            display: inline-block;
            flex-basis: 35%;
            /* width: 26%; */
        }
    
    }
    #overlay.overlay_visible{
        pointer-events: all;
        opacity: 1;
    }

}

.advisors{

    .tile {
        img{
            object-position: 0 0%;
        }
        
    }

    .school{
        font-size: 14px;
        margin-bottom:5px;

    }

    .link{
        margin-top: 20px;
        a:first-child{
            margin-right: 10px;
        }
    }
}


.staff{
    .tile {
        img{
            object-position: 0 30%;
        }
        
    }

}