.home-button {
  width: 30px;
  height: 30px;
  padding: 7px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .14);
  backdrop-filter: blur(3px);
  opacity: .68;
}

.home-button svg {
  width: 15px;
  height: 15px;
  fill: #fff;
  filter: drop-shadow(0 1px 2px #000);
}

.home-button:hover,
.home-button:focus-visible {
  opacity: 1;
}

@media (max-width: 600px) {
  .nav {
    display: block;
    top: 0;
    bottom: 0;
    width: 42%;
    height: 100%;
    transform: none;
    background: transparent;
    opacity: 0;
    font-size: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    outline: none;
  }

  .nav:focus,
  .nav:active {
    background: transparent;
    outline: none;
  }

  .nav.prev { left: 0; }
  .nav.next { right: 0; }
  .nav[hidden] { display: none; }
}