* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}

body {
    height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100vh;
}

.left-panel {
    grid-column: 1/2;
}

.right-panel {

    grid-column: 2/3;
    padding: 1rem;

    /* panel contents are flexed */
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.headshot {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    object-position: top;

}


.engageButtons, .socialButtons {

    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-bottom: .5rem;

}







/* stack the panels when the width is less than or equal to 992px (large devices)*/
@media only screen and (max-width: 992px) {
    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);

    }

    .left-panel {
        grid-row: 1/2;
        grid-column: 1/2;
        /* height: 50vh; */

    }

    .right-panel {
        grid-row: 2/3;
        grid-column: 1/2;
        /* height: 50vh; */

    }

    .headshot {
        height: 50vh;
    }


}

/* when the panels are stacked, and the height is starting to squish */
@media only screen and (max-height: 725px) and (max-width: 992px) {
    .headshot {
        /* object-position: center 19%; */
        object-position: center 19%;
    }
}

/* when the panels are side-by-side, and the height is starting to squish */
@media only screen and (min-width: 992px) and (max-height: 425px) {
    .headshot {
        /* object-position: 50% 15%; */
        /* object-position: center; */
        object-position: center 25%
    }
}



/*
*
* ==========================================
* Circle button customizations, stolen from:
* https://bootstrapious.com/p/bootstrap-circle-button
* ==========================================
*
*/

.btn-circle {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
}

.btn-circle i {
    position: relative;
    top: -1px;
}

.btn-circle-sm {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 0.9rem;
}

.btn-circle-lg {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 1.1rem;
}

.btn-circle-xl {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 1.3rem;
}