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

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

.container{
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

/*==============  ARTICLE (portfolio) =====================*/
.container article{
	grid-column: 1/2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto auto auto auto;
	background-color: rgba(242,242,244,1.00);
}
/*body>main>nav a:active{
	background-size: 125%;*/
.container article a{
	width: 320px;
	height: 320px;
	background-position: center;
	background-size: cover;
	background-size: 100%;
	transition: all ease 400ms;
}
.container article a:hover{
	background-size: 113%;
	/*border-radius: 180px;*/
	transition: all ease 300ms;
	opacity: 0.2;

}

.container article a:nth-of-type(1){
	background-image: url("../images/13-mags/illus-afii-they-choose-france-square 500.png");
}
.container article a:nth-of-type(2){
	background-image: url("../images/0-sommaire/vign02.jpg");
}
.container article a:nth-of-type(3){
	background-image: url("../images/0-sommaire/vign03.jpg");
}
.container article a:nth-of-type(4){
	background-image: url("../images/0-sommaire/vign04.jpg");
}
.container article a:nth-of-type(5){
	background-image: url("../images/0-sommaire/vign05.png");
}
.container article a:nth-of-type(6){
	background-image: url("../images/0-sommaire/vign06.png");
}
.container article a:nth-of-type(7){
	background-image: url("../images/0-sommaire/vign07.png");
}
.container article a:nth-of-type(8){
	background-image: url("../images/0-sommaire/vign08.png");
}
.container article a:nth-of-type(9){
	background-image: url("../images/0-sommaire/vign09.gif");
}
.container article a:nth-of-type(10){
	background-image: url("../images/0-sommaire/vign10.png");
}
.container article a:nth-of-type(11){
	background-image: url("../images/0-sommaire/vign11.png");
}
.container article a:nth-of-type(12){
	background-image: url("../images/0-sommaire/vign12.jpg");
}
.container article a:nth-of-type(13){
	background-image: url("../images/0-sommaire/vign01.png")
}
.container article a:nth-of-type(14){
	background-image: url("../images/0-sommaire/barney-bubbles-square color1.jpg");
}
.container article div{
	background-color: #373B4D;
}

/*==============  1150PX  ===========================*/

@media only screen and (max-width: 1150px){
	
	.container article{
	margin: 0 auto;
	max-width: 633px;
}
	.container article a{
	width: 211px;
	height: 211px;
}
}
/*==============  680PX  ===========================*/
@media only screen and (max-width: 680px){
	.container article{
	margin: 0 auto;
	max-width: 410px;
}
	.container article a{
	width: 205px;
	height: 205px;
}

	.container article{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto auto auto auto auto auto auto;
}
}
/*==============  450PX  ===========================*/

@media only screen and (max-width: 450px){
	
	.container{
	max-width: 320px;
}
	.container article a{
	width: 160px;
	height: 160px;
}
}
/*==============  360PX  ===========================*/

@media only screen and (max-width: 360px){
	.container{
	max-width: 260px;
	margin: 0 auto;
}
.container article{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(14, 1fr);
}

.container article a{
	width: 220px;
	height: 220px;
}
}