/* MV layer alignment against the fixed PC 1440px / SP 390px Figma frames.
   Asset sizes include Figma's shadow outside each photo group. */
@media (min-width: 1001px) {
  .hero-brand { right: 2.0833%; top: 4.6154%; width: 4.7917%; }
  .hero-badge { top: 12.4615%; width: 15.1389%; }
  .hero-title { left: 30.4861%; top: 18.9231%; }
  .hero-subtitle { left: 38.3333%; top: 64.9231%; width: 23.4028%; }
  .hero-photo-one { left: 27.1875%; top: -12.1538%; width: 15.2083%; }
  .hero-photo-two { right: 13.3333%; top: -8%; width: 21.6667%; }
  .hero-photo-three { left: 15.6944%; bottom: 1.0769%; width: 16.5278%; }
  .hero-photo-four { right: 21.5278%; bottom: 5.6923%; width: 12.3611%; }
  .hero-woman { right: 5.2083%; }
}
@media (max-width: 1000px) {
  .hero-brand { right: 3.8462%; top: 2.5%; width: 11.0256%; }
  .hero-badge { left: 1.7949%; top: 14%; width: 25.641%; }
  .hero-title { left: 8.7179%; top: 23%; width: 82.3077%; }
  .hero-subtitle { left: 23.0769%; top: 52.8333%; width: 52.5641%; }
  .hero-photo-one { left: 20%; top: -4.8333%; width: 33.5897%; }
  .hero-photo-two { right: -7.9487%; top: 8.5%; width: 36.1538%; }
  .hero-photo-three { left: 3.5897%; bottom: -1.5833%; width: 36.6667%; }
  .hero-photo-four { left: 40%; right: auto; bottom: 10.1667%; width: 26.9231%; }
}

/* Title and period wrap their image in an inner <picture>; .hero picture makes it
   absolute, so it kept the image's natural size once the hero grew past 1440px. */
.hero-title picture,
.hero-period picture { position: static; display: block; width: 100%; }
.hero-title img,
.hero-period img { display: block; width: 100%; height: auto; }