.lb-nav{
  position:fixed;top:50%;z-index:302;
  width:48px;height:64px;padding:0;
  display:grid;place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(236,230,218,.32);border-radius:0;
  background:rgba(18,16,12,.55);color:#ECE6DA;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.lb-nav:hover,.lb-nav:focus-visible{border-color:rgba(236,230,218,.75);background:rgba(18,16,12,.8)}
.lb-nav svg{width:17px;height:17px;pointer-events:none}
.lb-prev{left:max(1rem,env(safe-area-inset-left))}
.lb-next{right:max(1rem,env(safe-area-inset-right))}
@media(max-width:600px){
  .lb-nav{width:40px;height:52px}
  .lb-prev{left:max(.45rem,env(safe-area-inset-left))}
  .lb-next{right:max(.45rem,env(safe-area-inset-right))}
  .lb-hint{padding-inline:3.5rem}
}