/* KIDS world — hero responsive overrides.
   Scoped to .world-page--kids only. No other world/page is affected.
   Base layout/tokens come from worlds.css; here we only adapt the hero media
   so the same photograph is cropped (never distorted) per viewport. */

.world-page--kids .world-hero {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  min-height: 0;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.world-page--kids .world-hero__media {
  justify-self: stretch;
  width: 100%;
  max-width: none;
  /* vertical mobile crop (9:16) */
  aspect-ratio: 9 / 16;
}

.world-page--kids .world-hero__media img,
.world-page--kids .world-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* tablet — 4:5 portrait crop */
@media (min-width: 700px) {
  .world-page--kids .world-hero__media {
    aspect-ratio: 4 / 5;
    max-width: 40rem;
    justify-self: center;
  }
}

/* desktop — horizontal 16:9 hero, full available width */
@media (min-width: 1024px) {
  .world-page--kids .world-hero__media {
    aspect-ratio: 16 / 9;
    max-width: none;
    justify-self: stretch;
  }
}