body {
  max-width: 1024px;
  text-align: center;
  margin: 0 auto;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 0.8fr);
  grid-column-gap: 10px;
  grid-row-gap: 30px;
}

.div1 {
  position: relative;
  grid-area: 1 / 6 / 2 / 11;
}
.div1 > :after {
  content: '';
  width: 4px;
  height: 10vh;
  background-color: rgb(28, 3, 117);
  position: absolute;
  bottom: calc(-10vh - 1px);
}
.div1 > :before {
  content: '';
  width: 20vw;
  height: 4px;
  background-color: rgb(28, 3, 117);
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(-10vh - 1px);
  margin: auto;
  z-index: -1;
}
.div2 {
  grid-area: 2 / 3 / 3 / 8;
  position: relative;
}

.div3 {
  grid-area: 2 / 9 / 3 / 13;
  position: relative;
}
.div3 > :after {
  content: '';
  width: 4px;
  height: 30px;

  background-color: rgb(28, 3, 117);
  position: absolute;
  bottom: -31px;
  z-index: -1;
}
.div4 {
  grid-area: 3 / 1 / 4 / 4;
  position: relative;
}
.div4 > ::before {
  content: '';
  width: 4px;
  height: 28.5px;
  background-color: rgb(28, 3, 117);
  position: absolute;
  right: 10%;
  top: -28px;
  z-index: -1;
}

.div5 {
  grid-area: 3 / 4 / 4 / 7;
  position: relative;
}
.div5 > ::before {
  content: '';
  width: 4px;
  height: 28.5px;
  background-color: rgb(28, 3, 117);
  position: absolute;
  top: -28px;
  z-index: -1;
}

.div6 {
  grid-area: 3 / 10 / 4 / 13;
}
.div7 {
  grid-area: 3 / 7 / 4 / 10;
  position: relative;
}
.div7 > ::before {
  content: '';
  width: 4px;
  height: 28.5px;
  background-color: rgb(28, 3, 117);
  position: absolute;
  left: 10%;
  top: -28px;
  z-index: -1;
}
.card {
  text-align: center;
  border: 1px solid gray;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.8em;
  height: 100%;
}
.department {
  padding: 5px;
  color: white;
  background-color: rgb(98, 43, 226);
}
.name,
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
}
.name p,
.title p {
  padding: 0;
  margin: 0;
}

.name {
  background-color: antiquewhite;
  font-weight: bold;
}
.title {
  background-color: beige;
}
.phone {
  background-color: white;
}
.phone > a {
  text-decoration: none;
  color: black;
}
