.menu-item, .mega-menu-item { position: relative; }
.mega-menu-item .menu-bubble, .menu-item .menu-bubble {
  position: absolute;
  display: none;
  background: transparent;
  z-index: 99999;
  border-radius: 10px;
  overflow: hidden;
  width: 160px;
  height: 90px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  pointer-events: none;
}
.mega-menu-item .menu-bubble img,
.mega-menu-item .menu-bubble video,
.menu-item .menu-bubble img,
.menu-item .menu-bubble video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mega-menu-item:hover > .menu-bubble,
.menu-item:hover > .menu-bubble {
  display: block;
}
.menu-bubble.top   { bottom: 120%; left: 50%; transform: translateX(-50%); }
.menu-bubble.bottom{ top: 120%;  left: 50%; transform: translateX(-50%); }
.menu-bubble.left  { right: 120%; top: 50%;  transform: translateY(-50%); }
.menu-bubble.right { left: 120%;  top: 50%;  transform: translateY(-50%); }