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

.gallery li {
	list-style:none;
	width: 100%;
	aspect-ratio:4/3;
	overflow: hidden;
	border-radius: 20px;
}


.gallery li a:hover{
	opacity: 0.75;
}

.gallery img{
	width:120%;
	height:auto;
	vertical-align: bottom;
}

@media only screen and (max-width: 1000px) {
	#gallery-area {
		padding-bottom: 0;
	}
}

@media only screen and (max-width: 800px) {
	
	.gallery{
		gap: 10px;
	}
	
	.gallery li {
		width: 100%;
		padding: 0;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	
	.gallery li img{
		padding: 0;
	}
	
	#gallery-area {
		margin-top: 0;
	}
	
	.gallery-area {
		padding: 50px 20px 0;
	}
	
}


@media only screen and (max-width: 500px) {

	.gallery {
	    grid-template-columns: repeat(1, 1fr);
	}
	
	.gallery li {
        margin-bottom: 0;
    }


}