#zoom {

  position: fixed;
  z-index: -1;
  width: 0;
  height: 0;
  background-color: var(--alto-white);
  top: 0;
  left: 0;
  display: flex;
  overflow: hidden;

  > div {

    position: absolute;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    flex-shrink: 0;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity .3s ease-out;

    img {
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

  }

}

#zoom.zoomIn {

  z-index: 1000;
  width: 100%;
  height: 100%;

  > div.current {
    opacity: 1;
    z-index: 2;
  }

  > div.current:after {
    content: "\f410";
    font-family: var(--font-awe);
    font-weight: 600;
    position: absolute;
    z-index: 10;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    cursor: pointer;
  }

}