/*-------------------*/
/*-------------------*/
/*grid product*/
/*-------------------*/
/*-------------------*/
.grid-product{
    /*On initialise la grille*/
    display: grid;
    /*Pour le mobile chaque items de la grille prendra toute la largueur de l'ecran*/
    /*Nous deons specifier 1FR pour dire que ce sera une seule fraction par ligne UNIQUEMENT car cette regle sera changeante sur les differents affichages.*/
    grid-template-columns: repeat(1, 1fr);
    /*Le gap désigne l'espace, la goutierre entre les items de la grilles*/
    /*Vous pouvez chainer deux valeur pour l'espacements sur l'axe X et Y*/
    gap:1rem;
}
@media (min-width:768px){
    .grid-product{
        /*Nous redefinissons la grille pour voir 3 items par lignes sur l'affichage tablette*/
        grid-template-columns: repeat(3, 1fr);} 
}
@media (min-width:1024px){
    /*Nous redefinissons la grille pour voir 4 items par lignes sur les ecrans laptop*/
    .grid-product{grid-template-columns: repeat(3, 1fr);} 
}
@media (min-width:1366px){
    /*Nous redefinissons la grille pour voir 5 items par lignes pour les ecrans de bureau standards*/
    .grid-product{grid-template-columns: repeat(5, 1fr);} 
}
@media (min-width:1920px){
    /*Nous redefinissons la grille pour voir 3 items par lignes pour les grands ecrans de bureau*/
    .grid-product{grid-template-columns: repeat(6, 1fr);} 
}



/*-----------*/
/*CUSTOM GRID */
/*-----------*/
.grid-product {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2.75rem;
    grid-auto-flow: initial ;
    grid-auto-columns: auto;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.item-grid{display: initial;}


@media (min-width: 480px) {
  .grid-product {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.75rem;
    grid-auto-flow: initial ;
    grid-auto-columns: auto;
    max-width: 360px;
  }
    .item-grid{display: initial;}
}
@media (min-width: 768px) {
  .grid-product {
    grid-template-columns: repeat(2, 1fr);
    max-width:768px;
  }
}
@media (min-width: 1025px) {
  .grid-product {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1025px;
  }
}
@media (min-width: 1201px) {
  .grid-product {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1024px;
  }
}
@media (min-width: 1400px) {
  .grid-product {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1344px;
  }
}
@media (min-width: 1700px) {
  .grid-product {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1700px;
  }
}



/*STYLES FOR THE SECTION*/
#medias .grid-product article{
    text-align: center;
}
#medias .grid-product article svg{
    font-size: 6rem;
    margin:2rem;
    color: var(--clr-light);
}