@import url('../../js/photoswipe/dist/photoswipe.css');


p.hero {
	margin-bottom: 16px;
}

p.hero img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}


ul.details {
	list-style-type: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--grau);
	border-radius: 6px;
}

ul.details li {
	border-bottom: 1px solid white;
	padding: 12px 20px;
	font-size: 75%;
	letter-spacing: 3px;
	font-weight: bold;
	line-height: 160%;
	text-transform: uppercase;
}

ul.details li > small {
	letter-spacing: 2px;
	line-height: 160%;
	display: inline-block;
	margin-top: 8px;
}

ul.details li.container,
ul.details li.flaeche {
	text-transform: none;
}

ul.details li.container .caps {
	text-transform: uppercase;
}

ul.details li.link a {
	color: black;
}

@media (hover: hover) {
	ul.details li.link a:hover {
		color: var(--hover);
	}
}


article {
	margin-top: 6.25vw;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 160%;
}


/* Galerie */

/* Thank you, Chris Coyier. Amazing, as always:                     */
/* https://css-tricks.com/seamless-responsive-photo-grid/           */

.projekt-galerie {
	line-height: 0; /* Prevent vertical gaps */
	-webkit-column-count: 5;
	-webkit-column-gap:   10px;
	-moz-column-count:    5;
	-moz-column-gap:      10px;
	column-count:         5;
	column-gap:           10px;
	padding-top: 6.25vw;
	padding-left: 6.25%;
	padding-right: 6.25%;
	background-color: var(--cardboard);
}

.projekt-galerie a {
	/* disable link preview in iOS Safari */
	-webkit-touch-callout: none;
}

.projekt-galerie img {
	/* Just in case there are inline attributes */
	width: 100% !important;
	height: auto !important;
	margin-bottom: 10px;
	border-radius: 6px;
	/* disable selecting to avoid milky-white overlay especially in iOS Safari */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	display: block;
	/* the next styles are for the alt tag when lazyloading */
	color: var(--offblack);
	font-family: 'LeagueSpartan Bold';
	font-size: 75%;
}

.projekt-galerie a:last-child img {
	margin-bottom: 0;
}

@media only screen and (max-width: 1699px) {
	.projekt-galerie {
		-moz-column-count:    4;
		-webkit-column-count: 4;
		column-count:         4;
	}
}
@media only screen and (max-width: 1299px) {
	.projekt-galerie {
		-moz-column-count:    3;
		-webkit-column-count: 3;
		column-count:         3;
	}
}
@media only screen and (max-width: 899px) {
	.projekt-galerie {
		-moz-column-count:    2;
		-webkit-column-count: 2;
		column-count:         2;
	}
}
@media only screen and (max-width: 499px) {
	.projekt-galerie {
		-moz-column-count:    1;
		-webkit-column-count: 1;
		column-count:         1;
	}
}


/* Explosionszeichnung */


.explosionszeichnung {
	padding-top: 80px;
	padding-bottom: 80px;
}

.explosionszeichnung > p {
	margin: 0;
}

.explosionszeichnung > p > img {
	width: 80%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 800px;
}