.slider {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  overflow-x: scroll;
  padding: 0 1rem;
  cursor: grab;
  padding-bottom: 48px;
  scrollbar-width: thin;
}
@media all and (min-width: 650px){
  .slider {
    gap: 32px;
    padding: 0 32px 72px 32px;
  }
}
@media all and (min-width: 1200px){
  .slider {
    gap: 72px;
    padding: 0 14.2% 72px 14.2%;
  }
}
/** SCROLLBAR**/

/**
 * Code pour chrome
 */
@media all and (min-width: 1000px){

 @supports (-webkit-appearance:none) {
    .slider {
      scrollbar-width: unset;
    }
    .slider::-webkit-scrollbar {
      height: 3px;
    }

    /* Track */
    .slider::-webkit-scrollbar-track {
      background: #000000;
      -webkit-box-shadow: inset 0 0 3px #ffff;
      box-shadow: inset 0 0 3px #ffff;
      border-left: 50px solid #001e6c;
      border-right: 50px solid #001e6c;
    }

    /* Handle */
    .slider::-webkit-scrollbar-thumb {
      background: #ffffff00;
      -webkit-box-shadow: inset 0 0 5px #ffff;
      box-shadow: inset 0 0 5px #ffff;
      border-left: 50px solid #ffffff00;
      border-right: 300px solid #ffffff00;
    }
  }
}
@media all and (min-width: 1500px){
  @supports (-webkit-appearance:none) {
    .slider {
      scrollbar-width: unset;
    }
    /* Track */
    .slider::-webkit-scrollbar-track {
      border-left: 300px solid #001e6c;
      border-right: 300px solid #001e6c;
    }
    /* Handle */
    .slider::-webkit-scrollbar-thumb {
      border-left: 300px solid #ffffff00;
      border-right: 300px solid #ffffff00;
    }
  }
}


/** code pour firefox **/
@-moz-document url-prefix() {
  .slider {
    scrollbar-width: thin;
  }
}