/* mobile styles */
@media screen and (min-width: 100px)
{
  .telephone{
    opacity: 1;
  } 
  .tablette{
  opacity: 0;
  } 
  .laptop {opacity: 0;
  }
  .desktop {
    opacity: 0;
  }
 

}

/* small tablet styles */
@media screen and (min-width: 620px){
  .telephone{
    opacity: 0;
  } 
  .tablette{
  opacity: 1;
} 
.laptop {opacity: 0;
}
.desktop {
  opacity: 0;
}

}







/* large tablet & laptop styles */
@media screen and (min-width: 960px){

  .telephone{
    opacity: 0;
  } 
  .tablette{
  opacity: 0;
    } 
    .laptop {
      opacity:1;
    }
    .desktop {
      opacity: 0;
    }

  .grid{
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }
  .temoignage-g {
    grid-column: 2 / 9;
    text-align: left;
    margin: 15px;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid black;
  }
  .temoignage-d {
    grid-column: 4 / 11;
    text-align: left;
    margin: 15px;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid black;
  }
  

  .grid-item{
    font-size: 1 em;
  }

    .grid-container { 
      display: grid;
      grid-template-columns: repeat(8, 110px);
      grid-template-rows: repeat(auto-fill, 110px);
      gap: 10px;
      box-sizing: border-box;
      
    }

  .grid-item-livres1 {
    grid-column: 3/ span 5; 
    grid-row: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
    }

    .grid-item-livres2 {
      position: sticky;
      top: 30px;
      margin-top: 20px;
      grid-column: 2/4;
      grid-row: 2/4;
      text-align: left;
      padding: 10px;
      border-radius: 20px;
      background-color: rgba(0,0,0,0.2);
      }

  .grid-item-livres3 {
    font-size: small;
    margin-top: 30px;
      grid-column: 4/8;
      grid-row: 2/6;
      text-align: right;
      }
      .grid-item-livres3 img {
        min-width: 380px;
        max-width: 100%;
        }

  .grid-item-livres4{
    margin-top: 0px;
    grid-column: 2/6;
    grid-row: 6;
    text-align: center;
    padding-right: 10px;
    }

  .grid-item-livres5 {
    margin-top: 0px;
    grid-column: 3/ span 7;
    grid-row: 7;
    text-align: left;    
    background-color: rgba(0,0,0,0.2);
    padding: 10px;
    margin-bottom: 20px;
  }

  .grid-item-livres5 img {
    max-width: 500px;
    }
  .grid-item-livres6 {
    grid-column: 1 / 5;
    grid-row: 8;
    text-align: center;
    padding-left: 10px;
    border-radius: 20px;

    }
  .grid-item-livres7 { 
    grid-column: 4 / 8;
    grid-row: 8;
    text-align: center;
    border-radius: 20px;
    }

  .grid-item-livres8 {
    text-align: center;
    grid-column: 8 / 11;
    grid-row: 8;
    padding-right: 10px;
    border-radius: 20px;
    }

 .grid-item-livres9 { 
    border: none;
    margin-top:20px;
    padding: 10px;
    text-align: left;
    grid-column: 2 / span 6;
    grid-row: 10;
    border-radius: 20px;
    background-color: rgba(0,0,0,0.2);
    }

    .grid-item-livres10 {
       
        grid-column: 1/11;
        grid-row: 12/ span 4;
        }

  .grid-item-livres11 {  
    border: none;
    margin-top: 30px;
    text-align: left;
    grid-column: 4 / span 4;
    grid-row: 13;
    padding: 20px;
    border-radius: 20px;
    background-color: rgba(0,0,0,0.2);
    }

    .grid-item-livres12 { 
        border: none;
        grid-column: 1 / span 3;
        grid-row: 14/ span 2;
        border-radius: 20px;
        margin-left: 10px;
        margin-top: 40px;
      }

  .grid-item-livres13 { 
      grid-column: 8 / span 3;
      grid-row: 15;
      margin-top: 40px;
    }
   

  .grid-item-livres16 { 
    display: inline;
    position: sticky;
    bottom: 0px;
    text-align: left;
    grid-column: 1 / 3;



























 

}


/* desktop styles */
@media screen and (min-width: 1200px)
{
    .verysmall{
      opacity: 0;
    } 
    .small{
    opacity: 0;
  } 
  .laptop {opacity: 0;
  }
  .desktop {
    opacity: 1;
  }

  .grid{
    margin: 0 auto;
    width: 100%;
  }


  body{
    font-size: 20px;
    }

.temoignage-g {
  grid-column: 2 / 9;
  text-align: left;
  margin: 15px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid black;
}
.temoignage-d {
  grid-column: 4 / 11;
  text-align: left;
  margin: 15px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid black;
}

  .grid-item{
    font-size: 1 em;
  }

    .grid-container { 
      display: grid;
      grid-template-columns: repeat(11, 110px);
      grid-template-rows: repeat(auto-fill, 110px);
      gap: 10px;
      box-sizing: border-box;
      
    }

  .grid-item-livres1 {
    grid-column: 6/ span 5; 
    grid-row: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
    }

    .grid-item-livres2 {
      position: sticky;
      top: 30px;
      margin-top: 20px;
      grid-column: 2/4;
      grid-row: 2/4;
      text-align: left;
      padding: 20px;
      border-radius: 20px;
      background-color: rgba(0,0,0,0.2);
      }

  .grid-item-livres3 {
    margin-top: 30px;
      grid-column: 5/12;
      grid-row: 1/6;
      text-align: right;
      }
      .grid-item-livres3 img {
        min-width: 400px;
        max-width: 100%;
        }

  .grid-item-livres4{
    margin-top: 0px;
    grid-column: 2/5;
    grid-row: 5;
    text-align: center;
    }

  .grid-item-livres5 {
    margin-top: 0px;
    grid-column: 2/ span 9;
    grid-row: 6;
    text-align: left;    
    background-color: rgba(0,0,0,0.2);
    padding: 20px;
    margin-bottom: 20px;
  }

  .grid-item-livres5 img {
    max-width: 500px;
    }
  .grid-item-livres6 {
    grid-column: 1 / 5;
    grid-row: 7;
    text-align: center;
    padding-left: 10px;
    border-radius: 20px;

    }
  .grid-item-livres7 { 
    grid-column: 4 / 8;
    grid-row: 7;
    text-align: center;
    border-radius: 20px;
    }

  .grid-item-livres8 {
    text-align: center;
    grid-column: 8 / 11;
    grid-row: 7;
    padding-right: 10px;
    border-radius: 20px;
    }

 .grid-item-livres9 { 
    border: none;
    margin-top:20px;
    padding: 20px;
    text-align: left;
    grid-column: 2 / span 6;
    grid-row: 8;
    border-radius: 20px;
    background-color: rgba(0,0,0,0.2);
    }

    .grid-item-livres10 {
       
        grid-column: 1/11;
        grid-row: 10/ span 4;
        }

  .grid-item-livres11 {  
    border: none;
    margin-top: 30px;
    text-align: left;
    grid-column: 4 / span 4;
    grid-row: 11;
    padding: 20px;
    border-radius: 20px;
    background-color: rgba(0,0,0,0.2);
    }

    .grid-item-livres12 { 
        border: none;
        grid-column: 1 / span 3;
        grid-row: 12/ span 2;
        border-radius: 20px;
        margin-left: 10px;
        margin-top: 40px;
      }

  .grid-item-livres13 { 
      grid-column: 8 / span 3;
      grid-row: 13;
      margin-top: 40px;
    }
   

  .grid-item-livres16 { 
    display: inline;
    position: sticky;
    bottom: 0px;
    text-align: left;
    grid-column: 1 / 3;
  
    }

  footer{
  padding-top: 20px;
  }

}