/* 
	CSS- Datei: galleries.css
*/

h2.greyNewsNote {
	position: relative;
	text-align: left;
	padding: 0;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
.exhibitions {
	margin-top: 2em;
	margin-bottom: 1.5em;
	font-variant: small-caps;
	letter-spacing: 0.05em;
}
.boxOfGalleries {
	margin-bottom: 3em;
}
.innerHeadline {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35em;
}
.galleryText {
	text-align: left;
}

.galleryBox {
	width: 90vmin;
	display: grid;
	grid-template-columns: 45vmin 45vmin;
	grid-template-rows: 9vmin 45vmin;
	grid-template-areas: "oben oben"
						 "untenlinks untenrechts";
	gap: 0;
	box-shadow: 1vmin 1vmin 4vmin rgb(183, 190, 207);
	margin-bottom: 1.5em;
}
.titleOfGallery {
	grid-area: oben;
	align-self: center;
	/* margin: 0; */
	padding-left: 0.35em;
	margin: 0 0.5em 0 0.65em;
	border-bottom: solid 0.35vmin rgb(32, 13, 0);
}
.descriptionOfGallery {
	grid-area: untenlinks;
	margin: 0;
	font-size: 0.85em;
	padding-left: 1em;
	padding-right: 1.3em;
	padding-bottom: 5%;
	text-align: left;
	align-self: end;
	justify-self: start;
}
.imageBox {
	grid-area: untenrechts;
	align-self: end;
	justify-self: center;
	margin-bottom: 0.75em;
}
.imgPortrait {
	height: 90%;
	width: auto;
}
.imgLandscape {
	width: 90%;
	height: auto;
}

/* L i n k s */
.showroom {
	width: 90vmin;
}
.showroom:hover, .showroom:active {
	display: block;
	color: rgb(255, 221, 0);
	background-color: rgb(32, 13, 0);
}
.showroom:hover .titleOfGallery {
	border-bottom: solid 0.35vmin rgb(255, 221, 0);
}
.min680 {
	display: none;
}


@media only screen and (min-width: 680px) {
	.imageBox {
		margin-bottom: 1.0em;
	}
	.exhibitions {
		font-size: 135%;
	}
	.min680 {
		display: inline;
	}
}


@media only screen and (min-width: 780px) {
	.atFirst {
		width: 70%;
	}
	.showroom {
		margin: 0 auto;
	}
	.galleryBox {
		margin: 0 auto 1.5em auto;
	}
	.titleOfGallery {
		border-bottom: solid 0.175vmin rgb(32, 13, 0);
	}
	.showroom:hover .titleOfGallery {
		border-bottom: solid 0.175vmin rgb(255, 221, 0);
	}
	.descriptionOfGallery {
		font-size: 1em;
	}
}


@media only screen and (orientation: landscape) {
/* 
	.atFirst {
		width: 50%;
	}
 */
	.galleryBox {
		width: 90vmax;
		grid-template-columns: 45vmax 45vmax;
		grid-template-rows: 9vmax 45vmax;
	}
	.showroom {
		width: 90vmax;
	}
}


@media only screen and (min-width: 1020px) and (orientation: landscape) {
	nav {
		position: absolute;
	}
	form {
		position: relative;
		bottom: 0;
		margin-bottom: 10em;
	}
	h2.greyNewsNote {
		font-size: 230%;
	}
	.exhibitions {
		font-size: 165%;
	}
		.imageBox {
		margin-bottom: 2.3vmax;
	}
	.titleOfGallery {
		font-size: 130%;
	}
	.galleryText {
		text-align: justify;
	}
/* 
	.descriptionOfGallery {
		font-size: 100%;
	}
 */
	.textBox {
		display: grid;
		width: 90vmax;
		margin: 7em auto 5em auto;
    	grid-template-columns: 47% 47%;
    	grid-template-rows: auto;
    	grid-template-areas: 	"col2 col3";
    	gap: 6%;
	}
	/* 
.col1 {
		grid-area: col1;
	}
 */
	.col2, col3 {
		align-self: start;
	}
	.col2 {
		grid-area: col2;
		justify-self: end;
	}
	.col3 {
		grid-area: col3;
		justify-self: start;
	}
}


@media only screen and (min-width: 1080px) {
	.atFirst {
		width: 30%;
	}
	.galleryBox {
		width: 46vmax;
		grid-template-columns: 23vmax 23vmax;
		grid-template-rows: 4.6vmax 23vmax;
		margin-bottom: 0;
	}
	
	.showroom {
		width: 46vmax;
		height: calc(23vmax + 4.6vmax);
	}
	.textBox {
		width: 80vmax;
	}
	.boxOfGalleries {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-row-gap: 2.5vmax;

	}
	.descriptionOfGallery {
		padding-bottom: 10%;
		font-size: 0.85em;
	}
}


/*
Die FARBEN
Blau:
0, 79, 159

Rot:
227, 6, 19

Gelb
255, 221, 0

Grau
183, 190, 207

Hellgrau
235, 233, 233

Weiß
246, 246, 246

Filmschwarz
32, 13, 0
*/