.fair-video-frame {
  width: min(100%, 310px);
  aspect-ratio: 9 / 16;
  margin: 24px auto 0;
}

.fair-video .fair-video-frame video {
  width: 100%;
  height: 100%;
  margin: 0;
}

.fair-video-overlay[hidden] { display: none !important; }

.fair-video-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: #0e0b09;
}

.fair-video-overlay video.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: block;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: #0e0b09;
}

.fair-video-overlay-caption,
.fair-video-sound,
.fair-video-close {
  position: fixed;
  z-index: 1101;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.fair-video-overlay-caption {
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  margin: 0;
  padding: 11px 14px;
  border-radius: 99px;
  background: rgba(14, 11, 9, .72);
}

.fair-video-sound,
.fair-video-close {
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 99px;
  background: rgba(14, 11, 9, .78);
  padding: 11px 15px;
  cursor: pointer;
}

.fair-video-close {
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
}

.fair-video-close span { margin-left: 7px; font-size: 19px; line-height: 0; vertical-align: -2px; }

.fair-video-sound {
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
  right: max(16px, env(safe-area-inset-right));
}

@media (max-width: 640px) {
  .fair-video-overlay-caption { max-width: calc(100vw - 135px); font-size: 11px; }
  .fair-video-sound { bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)); }
}