.lightbox-nav {
  position: fixed;
  z-index: 2;
  top: 50%;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 4, 14, .68);
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color .2s, background .2s;
}

.lightbox-nav:hover {
  border-color: var(--orange);
  background: #120b19;
}

.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

@media (max-width: 520px) {
  .lightbox {
    padding: 70px 16px 80px;
  }

  .lightbox figure {
    max-width: 100%;
  }

  .lightbox-nav {
    top: auto;
    bottom: 16px;
    transform: none;
  }

  .lightbox-prev { left: calc(50% - 68px); }
  .lightbox-next { right: calc(50% - 68px); }
}