.gallery {
  word-wrap: break-word;
  margin-left: 300px;
  padding-left: 20px;
  
}

.gallery img {
  width:350px; /* this sets the width for every image */
  height:300px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:contain;
 padding:10px;

}

/* this is the main which CROPS every image */
.gallery > main {
  width:300px; /* this should match the image height */
  height:250px; /* this should match the image width */
  margin:20px;
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}