/* Each landmark remains a separate transparent image in the composition. */
.hero { position: relative; min-height: 0; padding-bottom: 24px; }
.hero > .hero-copy { position: relative; z-index: 2; padding-bottom: 0; }
.hero + section > .intro { padding-top: 28px; }
.hero .travel-collage {
  position: relative;
  isolation: isolate;
  align-self: start;
  width: calc(100% + max(28px, (100vw - 1240px) / 2 + 28px));
  max-width: none;
  height: auto;
  aspect-ratio: 1.15;
  margin: 28px 0 0;
  transform: none;
  overflow: hidden;
  pointer-events: none;
}
.travel-collage .landmark {
  position: absolute;
  display: block;
  height: auto;
  overflow: hidden;
}
.landmark-colosseum { width: 112%; left: 4%; top: 0; z-index: 1; }
.landmark-columns { width: 50%; left: 48%; top: 17%; z-index: 2; transform: rotate(30deg); }
.landmark-liberty { width: 28%; left: .5%; top: 13.5%; z-index: 3; }
.landmark-temple { width: 59%; left: 24%; bottom: 0; z-index: 4; }
.landmark-florence { width: 40%; left: 3%; bottom: 0; z-index: 5; }
.landmark-eiffel { width: 31%; right: 4%; bottom: 0; z-index: 6; }

@media (max-width: 650px) {
  .hero .travel-collage {
    width: calc(100% + 40px);
    align-self: center;
    margin: 24px -20px 0;
    aspect-ratio: 1.15;
  }
}