@charset "utf-8";
/* CSS Document */

		a{
			text-decoration: none;
			
		}


.spa-container{
	margin: 20px auto;
 


}
.spa1{
	
 

display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows:  repeat(3,150px);
	grid-gap: 0.5rem;
	grid-template-areas: "a b b" "c b b" "c d e" ;
	padding: 20px auto;
	
	
	margin:0px auto;
	width: 90%;
 
		
}
.img-container{
  position: relative;
	background-color: rgba(0,0,0,0.8);
		border: 5px solid #fff;
	cursor: pointer;


}
.spa-img{
  opacity: 1;
  display: block;
  width: 100%;
height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
object-fit: cover;
	
		
}

.image-over1{


	/*   grid-column: 1 / 3;
    grid-row: 1;*/

	grid-area: a;
}
.image-over2{

	grid-area: b;
	
	/*    grid-column: 3 ;
    grid-row: 2;*/
}
.image-over3{

	grid-area: c;
	/*    grid-column: 1 ;
    grid-row: 2 ;*/
}
.image-over4{

	grid-area: d;
	 
}
.image-over5{

	grid-area: e;
}



.img-container:hover .spa-img  {
  opacity: 0.3;
	
}
.img-container:hover .middle{
	opacity: 1;


}

.text-spa{
	text-align: center;
	font-size: 18px;
	color: #fff;
		margin-top: 1rem;
}
.middle{
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.image-overlay{
	width:30%;
	height: 300px;

	margin: 10px auto;
	border-radius: 20px;
	box-shadow: 10px 10px 10px #fff;
}
 

		@media  screen and (max-width:500px){
			.spa1{
			 	grid-template-columns: repeat(1,1fr);
	grid-template-rows:  repeat(5,150px);
	grid-gap: 0.5rem;
	grid-template-areas: "a" "b" "c" "d" "e" ;
		}
}