.gallery img {
  width:200px;
  height:150px;
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
}

.gallery > div {
  width:200px;
  height:150px;
  margin-right:10px;
  margin-bottom:30px;
}

.gallery img:hover {
  transform:scale(2.5);
  object-fit:contain;
}

figcaption{
  text-align:center;
	  color:navy;
}

body {
    background-image:url("/iconsfiles/picsbackground.jpg");
	  background-repeat:no-repeat;
	  background-position:center center;
	  background-size:cover;
	  background-attachment:fixed;
}

 .gallery{
   display:flex;
   border-radius:25px;
   flex-wrap:wrap;
   width:630px;
   background-color:rgba(255, 250, 213, 0.6);
   padding:40px;
   border:2px solid #fffad5;
   margin-left:105px;
   margin-top:20px;
   margin-bottom:20px;
   margin-right:20px;
  }
  
  .gallery:hover + .column{
    display:block;
  }
  
  p{
    text-align:left;
  }
  
  .scroll{
    display:none;
   border-radius:25px;
   width:400px;
   height:300px;
   background-color:rgba(255, 250, 213, 0.6);
   border:2px solid #fffad5;
   position:fixed;
   top:135px;
   right:40px;
   overflow-y:scroll;
  }
  
  .outline, .outline-hover:hover {
    --color:white;
    --c: var(--color);
    --w:2px;
    filter:
    drop-shadow(var(--w)0 0 var(--c))
    drop-shadow(calc(var(--w) * -1) 0 0 var(--c))
    drop-shadow(0 var(--w)0 var(--c))
    drop-shadow(0 calc(var(--w) * -1) 0 var(--c));
    }