body {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  background: #ffefd7;
  margin: 20px;
}

h1 {
  text-align: center;
  color: #249f82;
}

h2 {
  text-align: center;
  color: #249f82;
}

.person-card-photo {
  transform-box: fill-box;
  transform-origin: center;
}

.person-card-photo:hover {
  animation: card-wiggle 420ms ease-in-out;
}

.person-card-years {
  opacity: 0;
  transition: opacity 140ms ease-in-out;
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #420000;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.254));
}

.main-card-group:hover .person-card-years,
.partner-card-group:hover .person-card-years,
.partner2-card-group:hover .person-card-years {
  opacity: 1;
}

@keyframes card-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-2deg) scale(1.02); }
  50% { transform: rotate(2deg) scale(1.02); }
  75% { transform: rotate(-1deg) scale(1.01); }
}