.mrn-grid{
  display: grid;
}


.mrn-1rep{
  grid-template-columns: repeat(1, 1fr);
}
.mrn-2rep{
  grid-template-columns: repeat(2, 1fr);
}
.mrn-3rep{
  grid-template-columns: repeat(3, 1fr);
}
.mrn-4rep{
  grid-template-columns: repeat(4, 1fr);
}
.mrn-5rep{
  grid-template-columns: repeat(5, calc(100% /5));
}
.mrn-6rep{
  grid-template-columns: repeat(6, 1fr);
}
.mrn-7rep{
  grid-template-columns: repeat(7, 1fr);
}
.mrn-8rep{
  grid-template-columns: repeat(8, 1fr);
}
.mrn-9rep{
  grid-template-columns: repeat(9, 1fr);
}
.mrn-10rep{
  grid-template-columns: repeat(10, 1fr);
}
.mrn-11rep{
  grid-template-columns: repeat(11, 1fr);
}
.mrn-12rep{
  grid-template-columns: repeat(12, 1fr);
}



.mrn-0_5then1rep{
  grid-template-columns: 0.5fr repeat(1, 1fr);
}

.mrn-gap10{
  grid-gap: 10px;
}
.mrn-gap20{
  grid-gap: 20px;
}
.mrn-gap30{
  grid-gap: 30px;
}

@media screen and (max-width: 1600px){
  .mrn-5rep{
      grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 1220px){
  .mrn-4rep, .mrn-5rep{
      grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 980px){
  .mrn-3rep,.mrn-4rep,.mrn-5rep{
      grid-template-columns: repeat(2, 1fr);
  }
  .mrn-0_5then1rep{
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 500px){
  .mrn-2rep, .mrn-3rep,.mrn-4rep,.mrn-5rep{
      grid-template-columns: 1fr;
  }
}

/************
flex box
************/

.mrn-flx{
  display: flex;
}
.mrn-wrap{
  flex-wrap: wrap;
}


/***************
master js needed
****************/
.mrn-txtOfBlockSize {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px; /* Taille de police de départ */
    max-width: 100%; /* Largeur maximale de la balise span */
    box-sizing: border-box; /* Inclure la taille de la bordure et du padding dans la largeur */
}