@import url('https://www.hofinga.at/styles.css');
div.gallery {
	column-count: 4;
	column-gap: 10px;
	padding: 10px;
	& div.gallery-item {
		break-inside: avoid;
		margin-botton: 10px;
		border: 4px solid black;
		background: #f1f1f1;
		transition: transform 0.2s ease;
		&:hover {
			transform: scale(1.01,1.01);
			filter: brightness(90%);
		}
		& a {
			& img {
				width: 100%;
				height: auto;
				display: block;
			}
		}
		
	}
	& div.lightbox {
			& img {
				max-width: 90vw;
				max-height: 90vh;
				border: 4px solid white;
			}
			a.close {
				position: absolute;
				top: 15px;
				right: 35px;
				font-size: 3rem;
				color: white;
				font-weight: 800;
				text-decoration: none;
				transition-duration: 0.2s;
				&:hover {
					transform: scale(1.2,1.2);
				}
			}
			a.previous {
				position: absolute;
				top: 50%;
				left: 35px;
				font-size: 3rem;
				color: white;
				font-weight: 800;
				text-decoration: none;
				transition-duration: 0.2s;
				&:hover {
					transform: scale(1.2,1.2);
				}
			}
			a.next {
				position: absolute;
				top: 50%;
				right: 35px;
				font-size: 3rem;
				color: white;
				font-weight: 800;
				text-decoration: none;
				transition-duration: 0.2s;
				&:hover {
					transform: scale(1.2,1.2);
				}
			}
		}
}
div.lightbox {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.85);
			justify-content: center;
			align-items: center;
			z-index: 9999;
			padding: 20px;
}
div.lightbox:target {
	display: flex;
}
@media (max-width: 900px) {
	div.gallery {column-count: 2;}
}
@media (max-width: 600px) {
	div.gallery {column-count: 1;}
}