body{ 	padding-top:5px; 	font-size:90%; 	font-family:Tahoma; background: url("img.jpg") bottom center;} 

.box{ 	padding-bottom:200px; margin: 0 px auto;	} 

.corps{ 	overflow:hidden; 	background-image:url("break.png"); 	background-repeat:no-repeat; background-position: bottom center; 	background-size: 100%; 	} 

h1{} 	
p{ 	width:99%; 	padding:2px 20px; 	margin:0; 	text-align:justify; 	text-justify:newspaper; border-radius:4px 4px; 	word-wrap:break-word; 	} 

<!-- h2{	background-color:#7489AF;} --> /* .....  from >>>   https://devsnap.me/css-text-effects crazy titles !!!! */ 

h2{	position: relative; top: 30%;left:50%; width:70%;text-align:center; display:block;	margin:0 auto; transform: translate(-70%, -70%); font-size:23px;	letter-spacing:0.1em; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white; text-shadow: 4px 4px #472678, 10px 10px #000000; } 

b{ 	background-color:#F3DDC8; 	} 

a{ 	color:#FF1B00; 	font-display:bold; 	/* text-decoration:underline; */ 	/* background-color:#7489AF; */ 	} 

a:hover{ 	color:#fff; 	background-color:#DB995A; 	text-transform: uppercase; 	} /* Reset CSS */ * { 	/* margin: 0; */ 	/* padding: 0; */ 	box-sizing: border-box; 	} 

.icon{display:inline-block;text-align:center;width:100%;margin:5px auto;} 

img { /*width:250px;*/ max-width:130%; vertical-align: middle; display: inline-block; 	background:	rgba(100, 100, 100, 0.95);	} 

img:hover{filter: grayscale(100%);-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */} 

.imgdiv { 	position: relative; overflow:hidden; } 

.overlay { 	font-family:Arial; 	position: absolute; 	bottom: 0; 	background: rgba(12, 12, 12, 0.5); width: 100%; 	transition: .5s ease; 	opacity:0; 	color:#D1D1D1; 	font-size: 16px; 	padding: 20px; text-align: center; 	} 

.imgdiv:hover .overlay { 	opacity: 1; 	} .nor:has(img) { 	} 

.grid-wrp { 	display:block; 	width:75%; 	margin:0em auto; 	overflow:hidden; 	background-color:#7489AF; 	} 

.lhed {background-color:#998E8D;} 

.grid-wrp p{width:80%;margin:0 auto; 	} /* Main CSS */ /* *** quelques aides ..... >>>> https://css-tricks.com/snippets/css/a-guide-to-flexbox/  ......... yeah% */ 

.grid-wrapper > div { 	display: flex; 	justify-content: center; 	align-items: start; 
/* overflow:hidden;  */
background-color:#E0E0E0; 	padding:0.1em; 	/* border:1px solid #111; */ 	} 

.grid-wrapper > div > p{ 	min-height:110px; 	} 

.grid-wrapper > .nor,.wwide,.wide { 	/* background-color:rgba(0, 0, 0, 0.7); */ 	} 

.grid-wrapper > div a, 	.grid-wrapper > div > a > img { 	width: 100%; 	height: 100%; 	object-fit: cover; 	} 

.grid-wrapper > div.ng { 	grid-column: span 4;grid-auto-rows: 100px;height:100px; 	} 

.grid-wrapper { 	display: grid; 	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 125px; 	width:75%; 	margin:0em auto; 	background: #d8d8d8; 	} 

.fug .nor{ 	grid-row: span 2; 	} 

.grid-wrapper .nor { 	grid-column: span 2; 	background:#efefef;margin:5px;border-radius:4px 4px; } 

.grid-wrapper .wwide { 	grid-column: span 4; 	} 

.grid-wrapper .wide {  padding:0 1.5em; grid-column: span 2; grid-row: span 2;	} 

.grid-wrapper .tall { 	grid-row: span 2; 	} 

.grid-wrapper .thin { 	background: #d1d1d1; /* */ grid-row: span 1	; height:125px; align-items: center;	margin:auto 0;} 

.talll { 	grid-row: span 2	; 	} 

.grid-wrapper .big { 	grid-column: span 2; 	grid-row: span 2; 	} 

.grid-wrapper:nth-last-child{padding-bottom:200px;} /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ 

@media screen and (max-width: 960px) 	
{ 	body{font-size:100%;} 
p, h2{ 	padding:0 0 1em;	} 
.grid-wrapper p, .grid-wrp p {width:95%; 	} 
.box{width:90%;margin:0em auto;} 
.grid-wrp { 	display:block; 	width:100%; 	margin:0em auto; 	} 

.grid-wrapper .nor { 	grid-column: span 3;	} 

.grid-wrapper .wwide { 	grid-row: span 2; 	padding:0px 0.3em;} 

.wide{grid-column: span 2;} .grid-wrapper .tall { 	grid-row: span 2; 	} 

.grid-wrapper {width:100%; 	grid-auto-rows: 170px; 	margin:0em auto; 	grid-gap: 1px; 	} 

.grid-wrapper div{padding:4px;} 

.grid-wrapper .wide { 	grid-column: span 4;   padding:0 0.5em; } 

.grid-wrapper .talll { 	grid-row: span 3	; 	} 

.corps{ grid-auto-rows: 180px; /* border: 3px dashed #36B644; border-radius:15px 15px;*/ } 

img { 	} 	} /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media screen and (max-width: 1081px) 	

{ body{font-size:90%;} 	p, h2{ 	padding:0 0.1em;word-wrap:break-word; 	} 

.box{width:95%;margin:0 auto;padding:0;} 

.grid-wrapper .nor { 	grid-column: span 3; grid-row: span 1; } 

.grid-wrapper .thin { grid-row: span 1; /*height:190px;*/ align-items: center;} 

.grid-wrp { 	display:block; 	width:100%; 	margin:0em auto; 	} 

.grid-wrapper .wwide {padding:5px 0.5em;} 

.grid-wrapper .tall {padding:5px 1em;grid-row: span 3; } 

.wide{grid-column: span 2; grid-row: span 2;} 

.grid-wrapper { 	display: grid; 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 165px; 	width:100%; 	margin:0em auto;} 

.grid-wrapper div{padding:0;} 

.mak{ 	width:100%; 	grid-auto-rows: 100px; 	} 	

img { 	} 	} /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ 

@media screen and (min-width:1260px) { 	

.corps{width:80%;margin:0 auto;	border: 7px dashed #36B644;	}

.grid-wrapper p{/*columns:2;*/} 

.box{ 	margin:0 auto; 	padding:0 0.5em; 	} 

.grid-wrapper { 	grid-auto-rows: 120px; 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }