/*
 * The hero rotates through slide images of differing aspect ratios and the
 * banner box simply took whatever height the current image needed. Every
 * rotation therefore resized the banner and shoved the whole page down, which
 * reads as the page flashing or reloading.
 *
 * Reserving a fixed box keeps the layout still; slides letterbox inside it
 * instead of resizing it. The :has() guard limits this to the carousel that
 * actually rotates, so ordinary image panels keep their natural height.
 */
main div.relative.overflow-hidden.rounded-xl.bg-muted:has(button[aria-label^='Go to slide']) {
  aspect-ratio: 3 / 1;
}

main div.relative.overflow-hidden.rounded-xl.bg-muted:has(button[aria-label^='Go to slide']) > div {
  height: 100%;
}

main div.relative.overflow-hidden.rounded-xl.bg-muted:has(button[aria-label^='Go to slide']) img {
  height: 100%;
  object-fit: contain;
}