/* ================= SLIDER ===================== */
  .slider-wrapper {
    width: 100%;
    overflow-x: hidden; 
    position: relative;
    margin: 50px 0;
  }
  
  .slider {
    width:100%; min-width:1000px; overflow:hidden; margin:0 auto;
    height:var(--height,400px); background-color:white; position:relative;
  }
  .slider .item-cont {
    display:flex; width:100%; position:relative;
    min-width: calc(var(--width * var(--quantity)));
  }
  .slider .item-cont .item {
    width: var(--width,200px); height:var(--height,400px);
    position:absolute; left:100%;
    animation: autoRun 40s linear infinite;
    animation-delay: calc((-40s / var(--quantity)) * (var(--position) - 1));
    will-change: left;
  }
  @keyframes autoRun { from{ left:100%; } to{ left: calc(-1 * var(--width,200px)); } }
  .slider .item-cont .item img {
    width:100%; height:100%; object-fit:contain; object-position:center; display:block;
  }
  .slider .item p {
    font-weight:bold; font-size:1rem; color:black; display:flex;
    align-items:center; justify-content:center; height:100%; width:100%; text-align:center; margin:0;
  }
  /* Smaller screens */
  @media (max-width: 600px) {
    .slider .item p {
      font-size: 0.9rem; /* smaller for mobile */
    }
  }
  
  @-webkit-keyframes autoRun { from{ left:100%; } to{ left: calc(-1 * var(--width,200px)); } }
  .slider .item-cont .item {
    -webkit-animation: autoRun 40s linear infinite;
            animation: autoRun 40s linear infinite;
    -webkit-animation-delay: calc((-40s / var(--quantity)) * (var(--position) - 1));
            animation-delay: calc((-40s / var(--quantity)) * (var(--position) - 1));
  }