.directory-general-view * {
  box-sizing: border-box;
}

.directory-general-view {
  display: grid;
  width: 100%;
  grid-template-columns: 100%;
  grid-auto-rows: 100%;
  grid-gap: 40px;
  align-items: center;
}

.directory-general-view .directory-user-preview {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "picture info";
  grid-template-columns: 1fr 7fr;
  grid-gap: 0.5em;
  padding: 2px;
  border: medium solid lightgray;
}

.directory-general-view .directory-user-picture {
  grid-area: picture;
  height: auto;
  width: auto;
/*  border: solid; */
  justify-self: center;
  align-self: top;
  margin: 2px;
}

.directory-general-view .directory-user-info {
  grid-area: info;
  height: 100%;
  align-self: center;
  grid-gap: 20rem;
}

@media only screen and (max-width: 480px) {
  .directory-general-view .directory-user-preview {
    grid-template-columns: 0% 100%;
  }
}