@import "../common.css";
@import "../header.css";
@import "../footer.css";

:root {
  --title-text-margin-top: 5.7vw;
  --title-text-margin-bottom: 6.6vw;
  --client-font-size: 3.4vw;
  --image-width: 29.89vw;
  --image-height: 35.78vw;
  --about-font-size: 1.2vw;
  --img-margin-right: 3vw;
  --person-name-margin-top: 45.98vw;
  --person-name-margin-bottom: 36.77vw;
  --person-name-font-size: 3.2vw;
}

#title-text {
  color: #777777;
  margin-top: var(--title-text-margin-top);
  margin-bottom: var(--title-text-margin-bottom);
  text-transform: uppercase;
  font-size: var(--client-font-size);
}
img {
  display: block;
  width: var(--image-width);
  height: var(--image-height);
  object-fit: cover;
  margin-right: var(--img-margin-right);
}
#about-person {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#about-person * {
  font-family: "OCR", sans-serif !important;
  font-size: var(--about-font-size);
  margin-bottom: 1vw;
  color: #000000;
}
#about-person :last-child {
  margin-bottom: 0;
}
#person-name {
  margin-top: var(--person-name-margin-top);
  margin-bottom: var(--person-name-margin-bottom);
  font-size: var(--person-name-font-size);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#person-name *:first-child {
  color: #777777;
}
#person-name *:nth-child(2) {
  transform: translateX(50%);
}