/* Center the guild row under the logo and align its top with the Reel eyebrow. */
.hero-portraits {
  right: 27.5%; /* Logo: right 4% + half its 47% width. */
  transform: translateX(50%);
}
@media (min-width: 1600px) {
  .hero-portraits { right: 27%; } /* Logo: 5% + 44% / 2. */
}
@media (max-width: 1050px) {
  .hero-portraits { right: 26%; } /* Logo: 2% + 48% / 2. */
}
@media (max-width: 720px) {
  .hero-portraits { right: 50%; } /* Logo: 6% + 88% / 2. */
}

/* Lift only the avatar row to the first line of the centered Reel text column.
   Keep the existing stacked layout on phones. */
@media (min-width: 721px) {
  .hero-portraits { bottom: 102.25px; }
}
@media (min-width: 1600px) {
  .hero-portraits { bottom: 112.25px; }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .hero-portraits { bottom: 81.75px; }
}