/* ========================================
   Details - Banner
   ======================================== */

.details-page .details-banner {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100vh;
}

@supports (height: 100svh) {
  .details-page .details-banner {
    height: 100svh;
  }
}

.details-page .details-banner__video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.details-page .details-banner__video--mobile {
  /* visibility 隐藏不会像 display:none 那样被浏览器暂停，切换断点时视频已在播放 */
  visibility: hidden;
}

/* 移动端：切换到移动视频，铺满容器，上下左右居中裁切 */
@media (max-width: 767px) {
  .details-page .details-banner__video--desktop {
    visibility: hidden;
  }

  .details-page .details-banner__video--mobile {
    visibility: visible;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}