@gutter: 1rem;
@number: 4;

@tiny-screen: 480px;
@small-screen: 640px;

#grille {
	padding: 1rem;
	background: white;
}

// grid styles for container wich has a .grid(n,g) class
// n = number of columns (default = 4)
// g = gutter value (default = 1rem)
// example : .grid-container { .grid(12, 10px); }

[class*="grid-"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -@gutter;
}

[class*="grid-"] > * {
	flex: 0 0 auto;
	display: block; /* IE fix */
	width: ~'calc(100% * 1 / @{number} - @{gutter})';
	margin-left: @gutter;
}

 .grid(@number:@number, @gutter:@gutter) { 
 & > * {
	  width: ~'calc(100% * 1 / @{number} - @{gutter})';
	}
	& > .flexitem-double {
		width: ~'calc(100% * 2 / @{number} - @{gutter})';
	}
	& > .flexitem-first {
		order: -1;
	}
	@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
		& > * {
			width: ~'calc(100% * 1 / 2 - @{gutter})';
		}
		& > .flexitem-double {
			width: ~'calc(100% - @{gutter})';
		}
	}
	@media (max-width: @tiny-screen) {
		& > * {
			width: ~'calc(100% - @{gutter})';
		}
		& > .flexitem-double {
			width: ~'calc(100% - @{gutter})';
		}
	}

}


.grid-6 {
    .grid(6);
}
.cont-expo {
	position: relative;
	text-align : center;
	padding: 1rem;
	background: white;
}

.texte-img {
  position: absolute;
  color: white;
  font-size: 15px;
  padding-left: 3px;
  bottom: 15px;
  width: 100%;
  text-align: left;
  background: rgba(0, 0, 0, 0);
}

.image { 
  height: 150px;
  object-fit: cover;
  object-position: center;
 }


/* Reset */
html {
  font-size: 62.5%;
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}
body {
	margin: 0rem;
	background: #fff;
	font-family: system-ui;
	font-size: 1.8rem;
  line-height: 1.5;
}