#view {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr 216px;
  /* min-height: 100%; */
  padding: 36px;
  box-sizing: border-box;
}

/* list */
#list {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  overflow-y: scroll;
}

#list .btn {
  margin: 9px 0;
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 2.16rem;
  color: var(--c-gray);
  background: var(--c-whisper);
  cursor: pointer;
  transition:
    color 180ms var(--timing-function),
    opacity 180ms var(--timing-function),
    background-color 180ms var(--timing-function);
}

#list .btn.active {
  color: #fff;
  background: var(--c-blue);
  pointer-events: none;
  cursor: default;
}

/* main */
#main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

#screen {
  position: relative;
  width: 100%;
  padding: 0 0 56.25%;
  background: var(--c-iron);
}

#screen img,
#screen video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
}

#screen img[src="#"],
#screen video[src="#"] {
  display: none;
}

#ctrl {
  position: relative;
  margin: 18px 0 0;
  width: 100%;
}

#ctrl .box {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  z-index: 1;
}

#ctrl .box.show {
  display: flex;
}

#ctrl .btn {
  display: block;
  margin: 0 18px;
  width: 108px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 1.6rem;
  color: var(--c-gray);
  background: var(--c-whisper);
  cursor: pointer;
  transition:
    color 180ms var(--timing-function),
    opacity 180ms var(--timing-function),
    background-color 180ms var(--timing-function);
}

#ctrl .btn.active {
  color: #fff;
  background: var(--c-blue);
  pointer-events: none;
  cursor: default;
}


@media (hover :hover) {

  #list .btn:hover,
  #ctrl .btn:hover {
    opacity: .7;
  }
}