.portrait {
    width: 100%;
    min-height: 300px;

    .image-container {
        width: 50%;
        margin: 0 auto;

        .portrait-image {
            width: 100%;
        }
    }

    .name-container {
        width: 100%;
        min-height: 100px;
        position: relative;
        text-align: center;
    }

    .vertical-center {
        width: 100%;
        top: 10%;
    }

    .name {
        font-size: 2em;
        margin: 0 auto
    }
}

@media (min-width: 865px) {
    .portrait {
        width: 100%;
        height: 500px;
        -webkit-columns: 2 400px;
        -moz-columns: 2 400px;
        columns: 2 400px;
        -webkit-column-gap: 4em;
        -moz-column-gap: 4em;
        column-gap: 4em;
        -webkit-column-rule: 1px solid @lightGray;
        -moz-column-rule: 1px solid @lightGray;
        column-rule: 1px solid @lightGray;

        .image-container {
            width: 100%;
        }

        .portrait-image {
            width: 80%;
            float: right;
            position: relative;
        }

        .name-container {
            position: relative;
            height: 100%;
        }

        .vertical-center {
            top: 50%;
            position: relative;
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            text-align: left;
        }

        .name {
            font-size: 5em;
        }
    }
    
}