.container{
display:grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
.item{

padding: 8px;
border-radius : 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
text-align: center;
}

.detailjeu{
display: none;

}
.detailjeu2{
display: block;
text-shadow: 1px 1px 2px gray;
font-size: 18px;

}
a.info:hover .detailjeu{
display: block;	
position: absolute;
top: auto;
padding: 5px;
border-radius :2px;
background-color: white;
color: black;
}
.img2 {
display: none;
}
a.info2:hover .img2{
display: block;	
position: absolute;
top: auto;
padding: 5px;
border-radius :2px;
background-color: white;
color: black;
width: 15%;
}
h1{
text-align: center;
text-shadow: 2px 2px 5px gray;
}
.centrer{
text-align:center;
}
.menu{
z-index:2;
position :fixed;
height: 140px;
top:0;
left:0;
right:0;
background-color: #D6EAF8 ;
}
.corps{
margin-top: 155px;
}
@media only screen and (max-width:1024px){
.container{
display:grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
}
@media only screen and (max-width:800px){
.container{
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
}
@media only screen and (max-width:500px){
.container{
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
}
@media only screen and (max-width:390px){
.container{
display:grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
}