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

/* list */
#list {
  max-height: 100%;
  overflow-y: scroll;
}

#list .card {
  position: relative;
  margin: 0 0 27px;
  padding: 0 0 56.25%;
  width: 100%;
  height: 0;
  background: var(--c-whisper);
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
}

#list .card::before {
  content: "選択中";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: #fff;
  background: #000;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition:
    180ms var(--timing-function);
}

#list .card.active::before {
  background: rgba(0, 0, 0, .72);
  opacity: 1;
}

#list .card.active {
  pointer-events: none;
  cursor: default;
}

#list .card img {
  position: absolute;
  top: 0;
  left: 0;
}

/* main */
#main {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .36);
  z-index: 4000;
}

#main .block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  transition:
    width 270ms var(--timing-function),
    height 270ms var(--timing-function),
    transform 270ms var(--timing-function);
}

#main img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  transition:
    270ms var(--timing-function);
}

#main img.show {
  cursor: zoom-in;
  pointer-events: all;
  opacity: 1;
}

#main.zoom .block {
  width: 100vw;
  height: 100vh;
  transform: translate(-36px, -72px);
}

#main.zoom img.show {
  cursor: zoom-out;
}


/* zoom */
#zoom {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: rgba(0, 0, 0, .9);
  cursor: zoom-out;
  z-index: 3005;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 270ms var(--timing-function);
}

#zoom.show {
  pointer-events: all;
  opacity: 1;
}

#zoom img {
  display: block;
  margin: auto;
  padding: 27px;
  width: 90%;
  height: auto;
  transform: scale(.9);
  opacity: 0;
  animation:
    show 234ms var(--timing-function) forwards;
}

@keyframes show {
  100% {
    transform: scale(1);
    opacity: 1;
  }
}