.x-people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .x-people-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .x-people-grid { grid-template-columns: 1fr; }
}

.x-person-card {
  width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
}

.x-person-photo {
  position: relative;
  width: 100%;
  padding-top: 140%;
  border-radius: 12px;
  overflow: hidden;
}

.x-person-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.x-person-photo img:nth-child(1) { opacity: 1; }

.x-person-card:hover .x-person-photo img { opacity: 0; }

.x-person-card:hover .x-person-photo img:nth-child(2) {
  animation: frame2 1.5s infinite steps(1, start);
}
.x-person-card:hover .x-person-photo img:nth-child(3) {
  animation: frame3 1.5s infinite steps(1, start);
}
.x-person-card:hover .x-person-photo img:nth-child(1) {
  animation: frame1 1.5s infinite steps(1, start);
}

@keyframes frame2 {
  0%, 33% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes frame3 {
  0%, 33% { opacity: 0; }
  34%, 66% { opacity: 1; }
  67%, 100% { opacity: 0; }
}
@keyframes frame1 {
  0%, 66% { opacity: 0; }
  67%, 100% { opacity: 1; }
}

.x-person-title {
  margin-top: 14px;
  font-weight: 800;
  font-size: 22px;
}
.x-person-role {
  font-size: 15px;
  margin-top: 6px;
  color: #000;
}
.x-person-mail,
.x-person-phone {
  font-size: 15px;
  margin-top: 4px;
}
.x-person-mail a {
  color: inherit;
  text-decoration: none;
}