.popup{
  display: none;
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */  
  width: 100%; /* Full width */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0); /* Black w/ opacity */
  transition: background-color 1s ease;  
}
.gridContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  /* border: 1px green solid; */
  height: 100vh;
}

.popupImage {
  grid-column: 2;
  grid-row: 2;
  width: 50vw;
  max-width: 900px;
  
  transform: scale(0);
  transition: transform 0.6s ease;
}


.close{
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  color: rgb(255, 255, 255, 0);
  font-size: 8ch;

}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .popupImage{
    width: 80vw;
  }  
  .close{
    font-size: 5ch;
  }
}