@charset "UTF-8";
*, *::before, *::after { /*pseudo element*/
	box-sizing: border-box;
}

/*==============  CONTAINER =====================*/

.container{
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 600px 130px 270px;
	grid-template-rows: auto auto;
	grid-column-gap: 20px;
}
/*==============  ENCADRÉ TEXTE =====================*/
.resume nav a{
	text-decoration: none;
	font-size: 0.8rem;
	color: inherit;
}
.resume nav a:hover{
	color: rgba(0,0,0,0.20);
	transition: 300ms;
}

.resume{
	grid-column: 2/4;
	grid-row: 1/2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 110px 160px;
	padding-left: 20px;
	display:flex;
	flex-direction: column;
 }
.resum-vignette{
	background-image: url("../images/0-sommaire/barney-bubbles-square color1.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 150px;
	height: 150px;
	grid-column: 1/2;
}
.resum-text{
	margin-top: 20px;
	grid-column: 1/2;
	grid-row: 2/3;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.resum-text h2{
	font-size: 1.4rem;
	margin: 0px 0px 10px 0px;
}
.resum-text h3{
	font-size: 0.9em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(79,79,79,0.7);
	margin: 0px 0px 3px 0px;
}
.resum-text p{
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0px 0px 3px 0px;
}

/*==============  ARTICLE (portfolio) =====================*/
article{
	display: grid;
	grid-column: 1/2;
	grid-template-columns: 600px 130px;
	grid-template-rows: auto auto auto auto;
	grid-row-gap: 60px;
}
article video{
	width: 600px;
	height: 600px;
}
article video:nth-of-type(1){
	grid-row: 1/2;
	}
article video:nth-of-type(2){
	grid-row: 2/3;
	}
article video:nth-of-type(3){
	grid-row: 3/4;
	}
article video:nth-of-type(4){
	grid-row: 4/5;
	}
.legend{
	margin-left: 40px;
	height: 600px;
	width: 130px;
	font-size: 0.8rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.cover1{
	width: 130px;
	height: 130px;
	background-image: url("../images/14-joke-box/nick-lowe-i-love-the-sound-of-breaking-glass.jpg");
	background-size: contain;
	background-repeat: no-repeat
}
.cover2{
	width: 130px;
	height: 130px;
	background-image:url("../images/14-joke-box/A-Case-Of-The-Shakes-LP-front.jpg");
	background-size: contain;
	background-repeat: no-repeat
}
.cover3{
	width: 130px;
	height: 130px;
	background-image: url("../images/14-joke-box/ian-dury-and-the-blockheads-hit-me-with-your-rhythm-stick-1978-2.jpg");
	background-size: contain;
	background-repeat: no-repeat
}
.cover4{
	width: 130px;
	height: 130px;
	background-image: url("../images/14-joke-box/music-for-pleasure.jpg");
	background-size: contain;
	background-repeat: no-repeat
}
em{
	font-size: 1.03rem
}
	
/*==============  1150PX  ===========================*/

@media only screen and (max-width: 1150px){
	.container{
	padding: 0px;
	margin: 0 auto;
	max-width: 640px;
	display: grid;
	grid-template-columns: 640px;
	grid-template-rows: 240px auto;
	grid-column-gap: 20px;
}
	.resume{
	padding: 0px;
	margin: 20px 0px 0px 0px;
	grid-column: 1/2;
	grid-row: 1/2;
	display: grid;
	grid-template-columns: 180px 1fr;
}
	.resum-vignette{
	grid-column: 1/2;
	grid-row: 1/2;
	margin-top: 25px;
}	
	.resum-text{
	grid-column: 2/3;
	grid-row: 1/2;
	padding-left: 0px;
}	
	.legend{
		height: 130px;
		width: 90%;
		margin-left: 0px;
		display: grid;
		grid-template-columns: 150px 1fr;
	}
	.song{
		padding-right: 5px;
	}
	article{
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 640px;
	grid-template-rows: auto 150px auto 150px auto 150px auto 150px;
	grid-row-gap: 20px;
	}
	article video{
	width: 640px;
	height: 640px;
	}
	article video:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 1/2;
	}
	.legend:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 2/3;
	}
	article video:nth-of-type(2){
	background-color: rgba(145,199,199,1.00);
	grid-column: 1/2;
	grid-row: 3/4;
	}
	.legend:nth-of-type(2){
	grid-column: 1/2;
	grid-row: 4/5;
	}
	article video:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 5/6;
	}
	.legend:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 6/7;
	}
	article video:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 7/8;
	}
	.legend:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 8/9;
	}
	

}
/*==============  680PX  ===========================*/
@media only screen and (max-width: 680px){
	.container{
	padding: 0px;
	margin: 0 auto;
	max-width: 410px;
	display: grid;
	grid-template-columns: 410px;
	grid-template-rows: 240px auto;
	grid-column-gap: 20px;
}
	.resume{
	padding: 0px;
	margin: 20px 0px 0px 0px;
	grid-column: 1/2;
	grid-row: 1/2;
	display: grid;
	grid-template-columns: 120px 1fr;
}
	.resum-vignette{
	margin: 45px 0px 0px 0px;
	grid-column: 1/2;
	grid-row: 1/2;
	background-size: contain;
	width: 100px;
	height: 100px;
}	
	.resum-text{
	grid-column: 2/3;
	grid-row: 1/2;
	padding-left: 0px;
}	
	.legend{
		height: 130px;
		width: 100%;
		margin-left: 0px;
		display: grid;
		grid-template-columns: 150px 1fr;
	}
	.resum-text p{
	font-size: 0.9rem;
	line-height: 1.3;
	margin: 0px 0px 3px 0px;
}

	article{
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 410px;
	grid-template-rows: auto 150px auto 150px auto 150px auto 150px;
	grid-row-gap: 20px;
	}
	article video{
	width: 410px;
	height: 410px;
	}
	article video:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 1/2;
	}
	.legend:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 2/3;
	}
	article video:nth-of-type(2){
	background-color: rgba(145,199,199,1.00);
	grid-column: 1/2;
	grid-row: 3/4;
	}
	.legend:nth-of-type(2){
	grid-column: 1/2;
	grid-row: 4/5;
	}
	article video:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 5/6;
	}
	.legend:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 6/7;
	}
	article video:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 7/8;
	}
	.legend:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 8/9;
	}
	}
/*==============  450PX  ===========================*/

@media only screen and (max-width: 450px){
	
	.container{
	padding: 0px;
	margin: 0 auto;
	max-width: 300px;
	display: grid;
	grid-template-columns: 320px;
	grid-template-rows: 220px auto;
	grid-column-gap: 0px;
}
	.resume{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	grid-column: 1/2;
	grid-row: 1/2;
	display: grid;
	grid-template-columns: 1fr;
}
	.resum-vignette{
	margin: 45px 0px 0px 0px;
	grid-column: 1/2;
	grid-row: 1/2;
	background-size: contain;
	width: 80px;
	height: 80px;
		display: none;
}	
	.resum-text{
	grid-column: 2/3;
	grid-row: 1/2;
	padding-left: 0px;
	padding-right: 10px;
}	
	.resum-text p{
	font-size: 0.9rem;
	line-height: 1.4;
	margin: 0px 0px 3px 0px;
}
		.legend{
		height: 130px;
		width: 100%;
		margin-left: 0px;
		display: grid;
		grid-template-columns: 210px 1fr;
	}
	.song{
		grid-column: 1/2;
		grid-row: 1/2;
		padding-right: 20px;
	}
	.cover1{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;

	}
	.cover2{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;
	}
	.cover3{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;
	}
	.cover4{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;
	}

	article{
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 300px;
	grid-template-rows: auto 120px auto 120px auto 120px auto 120px;
	grid-row-gap: 10px;
	}
	article video{
	width: 300px;
	height: 300px;
	}
	article video:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 1/2;
	}
	.legend:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 2/3;
	}
	article video:nth-of-type(2){
	background-color: rgba(145,199,199,1.00);
	grid-column: 1/2;
	grid-row: 3/4;
	}
	.legend:nth-of-type(2){
	grid-column: 1/2;
	grid-row: 4/5;
	}
	article video:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 5/6;
	}
	.legend:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 6/7;
	}
	article video:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 7/8;
	}
	.legend:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 8/9;
	}
	}

@media only screen and (max-width: 360px){
	.container{
	padding: 0px;
	margin: 0 auto;
	max-width: 260px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 240px auto;
	grid-column-gap: 20px;
}
	.resume{
	padding: 0px;
	margin: 0px 0px 0px 0px;
	grid-column: 1/2;
	grid-row: 1/2;
}
	.resum-vignette{
	margin: 0px 0px 0px 0px;
	grid-column: 1/2;
	grid-row: 1/2;
	background-size: contain;
	width: 80px;
	height: 80px;
	display: none;
}	
	.resum-text{
	grid-column: 1/2;
	grid-row: 1/2;
	padding-left: 0px;
	padding-right: 10px;
}	
	.resum-text p{
	font-size: 0.9rem;
	line-height: 1.4;
	margin: 0px 0px 3px 0px;
}
	.legend{
	height: 90px;
	width: 100%;
	margin-left: 0px;
	display: grid;
	grid-template-columns: 1fr 100px;
	}
	.song{
		grid-column: 1/2;
		grid-row: 1/2;
	}
	.cover1{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;

	}
	.cover2{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;
	}
	.cover3{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;
	}
	.cover4{
		grid-column: 2/3;
		grid-row: 1/2;
		width: 90px;
		height: 90px;
	}
	
	em{
		font-size: 0.9rem;
		line-height: 1.2rem;
	}


	article{
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 260px;
	grid-template-rows: auto 110px auto 110px auto 110px auto 110px;
	grid-row-gap: 8px;
	}
	article video{
	width: 260px;
	height: 260px;
	}
	article video:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 1/2;
	}
	.legend:nth-of-type(1){
	grid-column: 1/2;
	grid-row: 2/3;
	}
	article video:nth-of-type(2){
	background-color: rgba(145,199,199,1.00);
	grid-column: 1/2;
	grid-row: 3/4;
	}
	.legend:nth-of-type(2){
	grid-column: 1/2;
	grid-row: 4/5;
	}
	article video:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 5/6;
	}
	.legend:nth-of-type(3){
	grid-column: 1/2;
	grid-row: 6/7;
	}
	article video:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 7/8;
	}
	.legend:nth-of-type(4){
	grid-column: 1/2;
	grid-row: 8/9;
	}
	}