/*GALLERY*/
/*
	<div class="gallery">
		<div class="card">
			<img src="img.jpg">
			<p>description</p>
		</div>
	</div>

	.gallery
	 -----  ----  ---  ----
	'     ''    ''   ''    '
	'     ''    ''   ''    '
	'-----''----''---''----'
	 ~~     ~ ~~  ~~   ~~ ~
	 ----  ---  ---  ------
	'    ''   ''   ''      '
	'    ''   ''   ''      '
	'----''---''---''------'
	 ~~~   ~    ~ ~  ~~ ~~
	 ------  --- 
	'      ''   '
	'      ''   '
	'------''---'
	 ~~ ~    ~ ~
	images are stretched to cover the entire raw
	it works well with images of similar size
	
	
	<div class="gallery frame">
	</div>
	.gallery.frame
	 --------  ---------  ----------  --------- 
	'  ----  ''  -----  ''  ------  ''  -----  '
	' '    ' '' '     ' '' '      ' '' '     ' '
	' '    ' '' '     ' '' '      ' '' '     ' '
	' '----' '' '-----' '' '------' '' '-----' '
	' ~~ ~~  '' ~~~ ~   '' ~~ ~~ ~  '' ~~ ~~   '
	'--------''---------''----------''---------'
	 -----------  ------- 
	'  -------  ''  ---  '
	' '       ' '' '   ' '
	' '       ' '' '   ' '
	' '-------' '' '---' '
	' ~~    ~~  '' ~~~   '
	'-----------''-------'
	images keeps their real ratio, but a frame appear around them
*/

/*adjusting 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;
	/*frames width and color*/
	--gallery-frame-width: 1px;
	--gallery-frame-color: lightgrey;
	--gallery-frame-color: transparent;
}

/*design*/
.gallery {
	display: flex;
	flex-wrap: wrap;
}
.gallery .card {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0px;
	margin: 0px;
	/*space between columns of cards*/
	margin-right: calc(var(--gallery-gap-unit) * 2);
}
.gallery .card > * {
	/*vertical space between elements inside of cards*/
	/*that also handle vertical space between cards without frames*/
	margin: var(--gallery-gap-unit) 0px;
}
.gallery .card img {
	/*height of imgs hence of lines*/
	height: var(--gallery-img-height);
	/*appearence of border of imgs*/
	border-style: solid;
	border-width: var(--gallery-img-border-width);
	border-color: var(--gallery-img-border-color);
}
/*to avoid last element of gallery to stretch untill end of line*/
.gallery::after {
	content: "";
	flex: 100;
}
/*in case of frames*/
.gallery.frame .card {
	/*spaces between cards*/
	margin-top: var(--gallery-gap-unit);
	margin-right: calc(var(--gallery-gap-unit) * 2);
	margin-bottom: var(--gallery-gap-unit);
	margin-left: 0px;
	/*horizontal spaces inside of cards*/
	/*vertical space is handled below by margins of childs elements*/
	padding-left: var(--gallery-gap-unit);
	padding-right: var(--gallery-gap-unit);
	/*width and color of frames*/
	border-style: solid;
	border-width: var(--gallery-frame-width);
	border-color: var(--gallery-frame-color);
}
.gallery.frame .card > * {
	/*the auto is what avoid img to stretch towards edges*/
	margin: var(--gallery-gap-unit) auto;
}


/*GALERY*/
.galery {
	display: flex;
	flex-wrap: wrap;
}
.galery .card {
	display: flex;
	flex-direction: column;
	/*
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	*/
	flex: 1 1 0;
	padding: 0px;
	margin: 20px 20px 20px 0px;
}
.galery .card img {
	height: 200px;
}
.galery .card p {
	margin-left: 0px;
}
.galery .card > * {
	margin: 5px 0px;
}
.galery::after {
	content: "";
	flex: 10;
}
/*space*/
.galery.space .card .image_background {
	display: flex;
	width: 100%;
	background-color: hsl(0, 0%, 95%);
}
.galery.space .card .image_background img {
	margin: auto;
}
/*cut*/
.galery.cut .card {
	display: flex;
}
.galery.cut .card > * {
	margin: 5px auto;
}
.galery.cut .card .image_background {
	display: flex;
	width: 100%;
	overflow: hidden;
	background-color: hsl(0, 0%, 95%);
}
.galery.cut .card .image {
	margin: auto;
}
.galery.cut .card .image img {
	margin: auto -30px;
}
/*minwidth*/
.galery.minwidth .card {
	min-width: 150px;
}


/*image du haut*/
div.image_container {
	border: 1px solid green;
	margin: auto;
	margin-left: 0px;
	overflow: visible;
}
div.image_container img {
	margin-left: -10px;
	margin-right: -10px;
}