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

.gallery img {
	padding: 4px;
	width: 100%;
	transition: opacity 0.5s;
}

.gallery img:hover {
	opacity: 0.6;
}

#display {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90vw;
}

#displayimage {
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#rightarrow {
	position: fixed;
	width: 4em;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	transition: opacity 0.2s;
}

#rightarrow:hover {
	opacity: 0.5;
}

#leftarrow {
	position: fixed;
	width: 4em;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s;
}

#leftarrow:hover {
	opacity: 0.5;
}

#x {
	position: fixed;
	width: 4em;
	top: 1em;
	right: 0;
	transform: translate(50%, -50%);
	transition: opacity 0.2s;
}

#x:hover {
	opacity: 0.5;
}

@media screen and (max-width: 900px) {
	.column {
		flex: 50%;
		max-width: 50%;
	}
}

@media screen and (max-width: 600px) {
	.column {
		flex: 100%;
		max-width: 100%;
	}
}