.card.person-teaching-lecturer,
.card.card-person {
  border-radius: 20px;
  text-align: center;
  transition: 0.2s ease;

  /* layout content */
  .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* photo */
  .field--type-image img,
  .person-teaching-lecturer__avatar img {
    border-radius: 500px;
    width: 150px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
  }

  /* role  */
  .role {
    color: var(--mhpc-primary);
    margin-top: 1rem;
  }

  .role-title,
  .card-text,
  .person-teaching-lecturer__bio {
    text-align: center;
    color: var(--mhpc-text-muted);
    font-size: 1rem;
    font-weight: 400;
  }

  /* name */
  .card-body h5.card-title.h5 a,
  .card-body h2.h5 a {
    transition: color 0.2s ease;
  }

  /* contact */
  .email,
  .phone {
    width: 100%;
    text-align: center;
  }

  .email a,
  .phone a {
    color: var(--mhpc-text-base);
    text-decoration: underline;
    transition: color 0.2s ease;
  }

  hr {
    width: 100%;
    opacity: 1;
    border: 0.5px solid var(--mhpc-border-default);
  }
}

.card.person-teaching-lecturer:hover,
.card.card-person:hover {
  background-color: var(--mhpc-primary-lighter);
  border: 1px solid var(--mhpc-primary);

  .field--type-image img,
  .person-teaching-lecturer__avatar img {
    border-color: var(--mhpc-primary);
  }

  .card-body h5.card-title.h5 a,
  .card-body h2.h5 a {
    color: var(--mhpc-primary-hover) !important;
  }

  .email a,
  .phone a {
    color: var(--mhpc-text-base) !important;
    text-decoration: underline;
  }

  a:hover {
    color: var(--mhpc-primary) !important;
  }
}