:host {
  display: block;
  background-color: white;
  /* required for fullscreen view */
  padding: 10px;
}

:host(.loading) {
  filter: blur(10px);
  pointer-events: none;
}

div#video-container pe-video {
  animation: bottom-to-top 0.2s;
}

div#small-video-container pe-video {
  animation: top-to-bottom 0.2s;
}

@keyframes bottom-to-top {
  from {
    transform: translateY(10%);
  }
}
@keyframes top-to-bottom {
  from {
    transform: translateY(-10%);
  }
}
#video-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

#small-video-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

#video-container > pe-video:nth-of-type(1) {
  width: 100%;
}

#small-video-container > pe-video:nth-of-type(1) {
  width: 35%;
}

#small-video-container > pe-video:nth-of-type(2) {
  width: 35%;
}

.fullscreen #small-video-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fullscreen #video-container > pe-video:nth-of-type(1) {
  width: 80%;
}
.fullscreen #small-video-container > pe-video:nth-of-type(1) {
  width: 100%;
  height: 25%;
}
.fullscreen #small-video-container > pe-video:nth-of-type(2) {
  width: 100%;
  height: 25%;
}
.fullscreen div#video-container pe-video {
  animation: left-to-right 0.2s;
}
.fullscreen div#small-video-container pe-video {
  animation: right-to-left 0.2s;
}
@keyframes left-to-right {
  from {
    transform: translateX(10%);
  }
}
@keyframes right-to-left {
  from {
    transform: translateX(-10%);
  }
}