.intro-box {
  height: 500px;
  background-color: #e6e7ea;
  background-image: url("frames-pattern.svg");
  background-repeat: repeat;
  background-size: 400px;
  background-attachment: fixed; 
  margin-bottom: 20px;
  align-content: center;
  text-align: center;
}
  .intro-box-text {
  font-size: 400%;
  font-weight: bold;
  margin: auto;
  text-align: center;
  background-color: #e6e7ea;
  background-image: linear-gradient(rgba(0,0,0,0) 15%, #e6e7ea 15%, #e6e7ea 85%, #F85D5A 75%);
}



.gallery{
   display: grid;
   width: 80%;
   grid-template-columns:repeat(3, 30vw);
   column-gap: 5%;
   grid-row-gap: 10vw;
   padding-left: 10px;
   padding-bottom: 10px;
}

.caption {
 text-align: center; 
   margin: auto;
}
.caption-media {
 font-weight: bold;
 background-image: linear-gradient(rgba(0,0,0,0) 15%, #e6e7ea 15%, #e6e7ea 85%, #F85D5A 75%);
}

img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;  
   font-size: 50%;
}

.frame {
	display: inline-block;
}
.dropdown {
  display: none;
  width: auto;
  background-color: #e6e7ea;
  border: 2px outset #F85D5A;
}

.frame:hover .dropdown {
 display: block;
}



@media screen and (max-width: 500px) {
  
.gallery{
   display: grid;
   width: 100vw;
   grid-template-rows: repeat(7, auto);
   grid-template-columns: 40vw 40vw;
   column-gap: 50px;
   grid-row-gap: 10px;
}

img {
   height: 40vw;
   object-fit: contain;
   display: block;  
}

.dropdown{
   max-width: 75%; 
}


}