/******************************************************************************\
  Genealogy pages grid styling
\******************************************************************************/

.genealogy-grid { display:grid; grid-gap:0; height:100%; width:100%;
  margin:0.25rem;
  grid-template-columns:600px 1fr;
  grid-template-rows:800px repeat(*,1fr) max-content;
  grid-template-areas:
    "picture summary"
    "biography biography"; }
  picture { grid-column:1 / 2; }
  summary { grid-column:2 / 3; }
  biography { grid-column:1 / 3; }
.picture { grid-area:picture; }
.summary { grid-area:summary; }
.biography { grid-area:biography; overflow:scroll; }
.picture img { max-width:300px; max-height:400px; object-fit:cover; }
.summary { background:hsl(30,30%,80%); margin:0; padding:0.5rem; }

.flex-container { display:flex; flex-flow:row wrap;
  justify-content:center; align-content:center; align-items:center; }
.flex-item { display:inline-block; order:0; flex:0 1 auto; }