.unbox_tile_video { position: relative; }
.unbox_tile_action {
  position: absolute;
  top: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  cursor: pointer;
}
.unbox_tile_sound { left: 8px; }
.unbox_tile_expand { right: 8px; }
.unbox_tile_action:hover { background: rgba(0, 0, 0, .8); }
.unbox_tile_action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.unbox_tile_action svg { pointer-events: none; }
.unbox_modal_viewer {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  max-width: calc(28.125vh + 88px);
  margin: auto;
}
.unbox_modal_viewer .unbox_modal_media { width: 100%; aspect-ratio: 9 / 16; }
.unbox_modal_viewer .unbox_modal_video { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; }
.unbox_modal_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--menu, #f3f0f8);
  color: inherit;
  cursor: pointer;
}
.unbox_modal_nav:hover { background: var(--background, #eee); }
.unbox_modal_nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }