#video-container #video-background {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: var(--fixed-popup-glass-background);
  z-index: 101;
}

#video-container #video-popup {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  gap: 1em;
  margin: auto;
  width: 60%;
  grid-template-columns: 1fr;
  height: 65%;
  overflow: hidden;
  background: var(--grey);
  border-radius: 5px;
  display: grid;
  padding: 1em;
  color: var(--text-color);
  transition: width 0.2s;
}

#video-container #video-popup.two-sections {
  grid-template-columns: 3.5fr 1fr;
  width: 78%;
  transition: width 0.2s;
}

#video-container #video-popup #video-main-panel {
  position: relative;
  width: fit-content;
  height: 65vh;
  transition: all 0.2s;
}

#video-container #video-popup.one-section #video-main-panel {
  grid-column: 1/3;
}

#video-container #video-popup .video {
  width: 60vw;
  height: 65vh;
  background: black;
  border-radius: 5px;
  transition: width 0.5s;
}

#video-container #video-popup #video-main-panel.fullscreen .video {
  width: 100%;
  height: 100%;
  transition: all 0.2s;
}

#video-container #video-popup .video-tools {
  width: 100%;
  position: absolute;
  bottom: 0.2em;
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.2s;
}

#video-container #video-popup .video-cut-container .video-tools {
  bottom: 0.5em;
}

#video-container #video-popup #video-main-panel:hover .video-tools,
#video-container #video-popup #video-main-panel.paused .video-tools,
#video-container #video-popup .video-cut-container:hover .video-tools,
#video-container #video-popup .video-cut-container.paused .video-tools {
  opacity: 1;
  transition: opacity 0.4s;
}