* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
nav {
	z-index: 999;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 20px;
}

.galleryConteiner {
	padding: 6%;
}
.galleryTop {
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background: linear-gradient(#0953b448, #1c3981), url(topone.jpg) repeat fixed;
	margin-top: 0;
}

.singleimage {
	height: 450px;
	width: 100%;
	position: relative;
	cursor: pointer;
}

.singleimage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.imagedescription {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: goldenrod;
	width: 100%;
	height: 0px;
	color: white;
	display: none;
	transition: height 0.5s ease;
	animation: heightReviel 0.3s forwards;
	z-index: 1;
}

@keyframes heightReviel {
	from {
		opacity: 0;
		height: 0px;
	}
	to {
		opacity: 1;
		height: 100px;
	}
}

.singleimage:hover .imagedescription {
	height: 100px;
	display: flex;
}

.imagedescriptioncover {
	background: #0761d6;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	display: none;
	border-radius: 4px;
	animation: coverReveil 0.3s forwards;
}

@keyframes coverReveil {
	from {
		opacity: 0;
		height: 0;
	}
	to {
		opacity: 0.7;
		height: 100%;
	}
}

.singleimage:hover .imagedescriptioncover {
	display: flex;
}