#video-dialog {
  padding: 0;
  inline-size: 80svi;
  block-size: auto;
  max-inline-size: 1280px;
  aspect-ratio: 1280 / 720;
  border: none;
  overflow: visible;
}
#video-dialog .video-container {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}
#video-dialog .close-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: min(30px, 10%);
  block-size: auto;
  translate: 0 calc(-100% - 6px);
}
#video-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.8);
}
#youtube-player {
  inline-size: 100%;
  block-size: 100%;
}
:where(.swiper-zoom-container, .swiper-slide) .ytmovie {
  position: relative;
  transition: filter 0.3s ease-in-out;
}
@media (hover: hover) {
  :where(.swiper-zoom-container, .swiper-slide) .ytmovie:hover img {
    filter: brightness(0.9);
    cursor: pointer;
  }
}
.swiper-slide.ytmovie.thumbnail > img {
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}
.ytmovie .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  inline-size: 15%;
  block-size: 15%;
  border-radius: 50%;
  background-color: rgb(255 0 0 / 0.7);
  container-type: inline-size;
}
.ytmovie .play-icon.large {
  inline-size: calc(100 / 3 * 1%);
  block-size: calc(100 / 3 * 1%);
}
.ytmovie .play-icon::after {
  display: block;
  content: "";
  inline-size: 0;
  block-size: 0;
  border-top: calc(15 / 60 * 100cqi) solid transparent;
  border-bottom: calc(15 / 60 * 100cqi) solid transparent;
  border-left: calc(20 / 60 * 100cqi) solid white;
  margin-left: calc(5 / 60 * 100cqi);
}