body{
    background-color:black;
}




.grid {
   display: grid; 
   max-width: 80vw; /* 80% de la largeur du viewport */
  height: 100vh;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   gap: 4px;
   }
  img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-0 {

   
   grid-row-start: 4;
   grid-column-start: 2;

   grid-row-end: 6;
   grid-column-end: 3;
   
}
.item-1 {

   
   grid-row-start: 3;
   grid-column-start: 3;

   grid-row-end: 7;
   grid-column-end: 7;
   
}
.item-2 {

   background-color:  #C0C0C0 ; 
   grid-row-start: 2;
   grid-column-start: 4;

   grid-row-end: 3;
   grid-column-end: 6;
   
}
.item-3 {

  
   grid-row-start: 1;
   grid-column-start: 6;

   grid-row-end: 3;
   grid-column-end: 7;
   
}
.item-4 {

   
   grid-row-start: 7;
   grid-column-start: 5;

   grid-row-end: 9;
   grid-column-end: 7;
   
}
.item-5 {

   background-color:#555454; 
   grid-row-start: 7;
   grid-column-start: 4;

   grid-row-end: 8;
   grid-column-end: 5;
   
}
.item-6 {

   
   grid-row-start: 8;
   grid-column-start: 7;

   grid-row-end: 10;
   grid-column-end: 8;
   
}
.item-7 {

   background-color: #999594 ; 
   grid-row-start: 6;
   grid-column-start: 7;

   grid-row-end: 8;
   grid-column-end: 8;
   
}
.item-8 {

   
   grid-row-start: 4;
   grid-column-start: 7;

   grid-row-end: 6;
   grid-column-end: 9;
   
}
.item-9 {

   color: #fff; 
   grid-row-start: 2;
   grid-column-start: 7;
   grid-row-end: 4;
   grid-column-end: 9;
   z-index:1;
   font-size:2em;
   
}
.item-10 {

   
   grid-row-start: 2;
   grid-column-start: 8;

   grid-row-end: 4;
   grid-column-end: 9;
   
}
.item-11 {

   
   grid-row-start: 5;
   grid-column-start: 9;

   grid-row-end: 6;
   grid-column-end: 11;
   
}
.item-12 {

   
   grid-row-start: 3;
   grid-column-start: 9;

   grid-row-end: 5;
   grid-column-end: 10;
   
}
.item-13 {

  
   grid-row-start: 6;
   grid-column-start: 8;

   grid-row-end: 7;
   grid-column-end: 10;
   
}
.item-14 {

   
   grid-row-start: 7;
   grid-column-start: 8;

   grid-row-end: 9;
   grid-column-end: 9;
   
}
.item-15 {

   color: #fff; 
   grid-row-start: 7;
   grid-column-start: 9;

   grid-row-end: 8;
   grid-column-end: 11;
   
}
.item-16 {

   background-color: #CBD87B; 
   grid-row-start: 7;
   grid-column-start: 9;

   grid-row-end: 8;
   grid-column-end: 11;
   
}


/* Pour les écrans de largeur maximale de 768px (taille de tablette) */
@media screen and (max-width: 768px) {
  .grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   
   gap: 4px;
   height: 100vh;
   max-width: 100vw;
   
}
img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

  
.item-0 {

    
   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}
.item-1 {

   
   grid-row-start: 2;
   grid-column-start: 2;

   grid-row-end: 3;
   grid-column-end: 3;
   
}
.item-13 {

   color: grey; 
   grid-row-start: 1;
   grid-column-start: 6;

   grid-row-end: 2;
   grid-column-end: 7;
   
}
.item-3 {

  
   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 2;
   grid-column-end: 4;
   
}
.item-4 {

   
   grid-row-start: 2;
   grid-column-start: 3;

   grid-row-end: 3;
   grid-column-end: 4;
   
}
.item-12 {

  
   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}
.item-6 {

  
   grid-row-start: 2;
   grid-column-start: 4;

   grid-row-end: 3;
   grid-column-end: 5;
   
}
.item-14 {

   background-color: grey;
   grid-row-start: 1;
   grid-column-start: 5;

   grid-row-end: 2;
   grid-column-end: 6;
   
}
.item-8 {

   
   grid-row-start: 2;
   grid-column-start: 5;

   grid-row-end: 3;
   grid-column-end: 6;
   
}
.item-9 {
 grid-row-start: 3;
   grid-column-start: 2;

   grid-row-end: 4;
   grid-column-end: 5;
   color: #fff; 
  
   
}
.item-10 {

 
   grid-row-start: 1;
   grid-column-start: 7;

   grid-row-end: 2;
   grid-column-end: 8;
   
}
.item-11 {

   background-color: #BD9755; 
   grid-row-start: 1;
   grid-column-start: 8;

   grid-row-end: 2;
   grid-column-end: 9;
   
}
.item-5 {

   
   grid-row-start: 2;
   grid-column-start: 6;

   grid-row-end: 3;
   grid-column-end: 7;
   
}
.item-2 {

   background-color: grey; 
   grid-row-start: 2;
   grid-column-start: 7;

   grid-row-end: 3;
   grid-column-end: 8;
   
}
.item-7 {

   
   grid-row-start: 2;
   grid-column-start: 8;

   grid-row-end: 3;
   grid-column-end: 9;
   
}
.item-15 {

   color:#fff;
   grid-row-start: 3;
   grid-column-start: 6;

   grid-row-end: 4;
   grid-column-end: 8;
   
}

}
@media screen and (max-width: 600px) {
   
   .grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   gap: 4px;
   height: 100vh;
   max-width: 100vw;
   
   
}
  
.item-0 {

    
   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}
.item-1 {

   
   grid-row-start: 1;
   grid-column-start: 3;

   grid-row-end: 2;
   grid-column-end: 4;
   
}
.item-13 {

   background-color: grey; 
   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}
.item-3 {

   
   grid-row-start: 1;
   grid-column-start: 5;

   grid-row-end: 2;
   grid-column-end: 6;
   
}
.item-4 {

   
   grid-row-start: 1;
   grid-column-start: 6;

   grid-row-end: 2;
   grid-column-end: 7;
   
}
.item-12 {

   background-color: grey; 
   grid-row-start: 1;
   grid-column-start: 7;

   grid-row-end: 2;
   grid-column-end: 8;
   
}
.item-6 {

  
   grid-row-start: 1;
   grid-column-start: 8;

   grid-row-end: 2;
   grid-column-end: 9;
   
}
.item-11 {

   background-color: grey; 
   grid-row-start: 2;
   grid-column-start: 2;

   grid-row-end: 3;
   grid-column-end: 3;
   
}
.item-8 {

   
   grid-row-start: 2;
   grid-column-start: 3;

   grid-row-end: 3;
   grid-column-end: 4;
   
}
.item-9 {
   grid-row-start: 3;
   grid-column-start: 2;
   grid-row-end: 4;
   grid-column-end: 7;
   color: #FFF; 
  font-size:3.2em;
}
.item-10 {

    
   grid-row-start: 2;
   grid-column-start: 5;

   grid-row-end: 3;
   grid-column-end: 6;
   
}
.item-7 {

   
   grid-row-start: 2;
   grid-column-start: 6;

   grid-row-end: 3;
   grid-column-end: 7;
   
}
.item-5 {

   
   grid-row-start: 2;
   grid-column-start: 7;

   grid-row-end: 3;
   grid-column-end: 8;
   
}
.item-2 {

    
   grid-row-start: 2;
   grid-column-start: 8;

   grid-row-end: 3;
   grid-column-end: 9;
   
}
.item-14 {

   
     grid-row-start: 2;
   grid-column-start: 4;

   grid-row-end: 3;
   grid-column-end: 5;
   
   
}
.item-15 {

   color: #fff; 
   grid-row-start: 4;
   grid-column-start: 2;

   grid-row-end: 5;
   grid-column-end: 7;
   font-size:1em;
   
}
}