/*
	table of content :
	- global settings
	- GALLERY
	- IMAGE single
*/

/*----------------------------------------------------*/
/*adjusting global settings*/
:root {
	/*GALLERY*/
	/*space between columns of cards*/
	--gallery-gap-unit: 6px;
	/*images height and border*/
	--gallery-img-height: 200px;
	--gallery-img-border-width: 1px;
	--gallery-img-border-color: lightgrey;
	/*IMAGE single*/
}

/*----------------------------------------------------*/
/*GALLERY*/

/*design*/
.gallery {
	font-size: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.gallery .card {
	font-size: 100%;
	display: flex;
	flex: 0 1 0;
	padding: 0px;
	margin: 0px;
	/*space between columns of cards*/
	margin-right: calc(var(--gallery-gap-unit) * 2);
	/*space between lines of cards*/
	margin-top: calc(var(--gallery-gap-unit) * 2);
}
.gallery .card > * {
	/*vertical space between elements inside of cards*/
	/*
	margin: var(--gallery-gap-unit) 0px;
	*/
}
.gallery .card img {
	/*height of imgs, hence of lines*/
	height: var(--gallery-img-height);
	margin: auto auto auto 0px;
	/*appearence of border of imgs*/
	border-style: solid;
	border-width: var(--gallery-img-border-width);
	border-color: var(--gallery-img-border-color);
}
.gallery .card p {
	font-size: 12px;
	line-height: 1.5em;
}

/*----------------------------------------------------*/
/*IMAGE single*/
.image {
	margin-right: auto;
	margin-left: 0px;
	width: 100%;
}
.image * {
	margin: 0px;
}
.image img {
	height: 400px;
	width: auto;
}
.image h1, .image h2, .image h3, .image p {
	width: auto;
	margin-left: calc(var(--gap-unit) * 2 );
}
/*images in full page*/
.image.full img {
	width: 100%;
	height: auto;
}