create two version old and new

old/styles/images.css

@@ -0,0 +1,88 @@
+/*
+	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;
+}
+/*images as icon, like for facebook links*/
+.img_icon {
+	width: 25px;
+}