/* Now you want to define what the lightbox will look like. Note that you have the display
   as none. You don't want it to show until the user clicks on one of the previews. 
   You will change this display property with JavaScript below. */
   
.po-lightbox-modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding: 10px 62px 0px 62px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  opacity: 1;
}

.po-lightbox-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  padding: 0 0 0 0;
  width: 80%;
  max-width: 80%;
}

/* Same with your slides, you set the display to none, because you want to choose which 
   one is shown at a time. */

.po-lightbox-slide {
  display: none;
}

.po-lightbox-image-slide {
  max-width: 90%;
  max-height: 90%;
}

.po-lightbox-modal-preview {
  width: 100%;
}

.po-lightbox-dots {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}