body{
	margin:40px;
	padding:0;
	text-align:center;
	background: #450000;
}

h3 {
	color: #999999;
	text-align: left;
	font-family: 'Miriam Libre', sans-serif;
  	font-size: 25px;
  	letter-spacing: 5px;
  	width: 100px;
  	margin-top: 0px;
  	margin-bottom: 20px;

}

a:link{
	text-decoration: none;
	
}

a:hover{

	color: red;
}


.lien {
	color: #999999;
}


 
.container{
	display:grid;
	grid-template-columns: 350px 350px 350px 350px;
	grid-auto-rows:auto auto;
	grid-gap:20px;
	justify-content: center;

}

.gallery-item{
	width:100%;
	height:100%;
	position:relative;
}

.gallery-item .image{
	width:100%;
	height:100%;
	overflow:hidden;
}

.gallery-item .image img{ 
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: 50% 50%;
	cursor: pointer;
	transition:.5s ease-in-out;
}
.gallery-item:hover .image img{
	transform: scale(1.5);
}

.gallery-item .text{
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #3d0b03;
	text-shadow: 2px 2px red;
	transform: translate(-50%,-50%);
	font-size: 35px;
	pointer-events: none;
	z-index: 4;
	transition: .3s ease-in-out;
	-webkit-backdrop-filter: blur(10px) saturate(1);
	backdrop-filter: blur(10px) saturate(1);

}

.gallery-item:hover .text{
	opacity: 1;
	animation: move-down .3s linear;
	padding: 1em;
	width: 70%;
}

@media screen and (max-width:500px){
	.container{
		grid-template-columns: repeat(1, 1fr);
	}
}

@keyframes move-down{

	0%{
		top: 10%;
	}
	50%{
		top: 35%;
	}
	100%{
		top: 50%;
	}
}