/*STYLES FOR CUSTOMIZED PERSONNEL FEATURE*/

/* styles for no photo option - without image and varying amounts of profile info, added styling to make it look less awkward*/
.personnel-grid .profile--in-grid.profile--in-grid-no-image {
    margin: 10px;
    padding: 30px;
    background-color: #f2f2f3;
}

.personnel-grid .profile-info.profile-info-no-image {
    order: 1; 
}

/*reorder "read more" button to display below main info for no photo option*/
.profile-more-button-no-image { order: 2;}

/*style to display 3 per row in personnel grid with photo*/
.personnel-grid .profile--in-grid.profile--in-grid-3-per-row {
    width: 33%;
}

/*style to display 3 per row in personnel grid layout without photo*/
.personnel-grid .profile--in-grid.profile--in-grid-no-image.profile--in-grid-3-per-row {
    width: calc(33% - 20px);
}

/*style to display 4 per row in personnel grid layout*/
.personnel-grid .profile--in-grid.profile--in-grid-no-image.profile--in-grid-4-per-row {
    width: calc(25% - 20px);
}