.branschLista {
   position: relative;
}

.branschLista::before,
.branschLista::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%; 
  z-index: 1;
  pointer-events: none;
}

.branschLista::before {
  left: 0;
  background: linear-gradient(to right, var(--third), transparent);
}

.branschLista::after {
  right: 0;
  background: linear-gradient(to left, var(--third), transparent);
}

.branschLista span {
   padding-top: 2rem;
   padding-bottom: 2rem;
}

.branschLista span:before {
   content: "•";
   margin: 0 3rem; 
}

.marquee {
    overflow: hidden;
}

.marquee .js-marquee {
    white-space: nowrap;
    display: inline-block; /* not flex */
}

.branschLista span {
    display: inline-block;
    white-space: nowrap; /* prevent individual span text from wrapping */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.marquee .js-marquee {
    white-space: nowrap;
    display: inline-block;
   
}

.js-marquee-wrapper {
    display:flex;
}

@media (max-width: 860px) {
    .branschLista span {
        width: auto; /* remove the fixed 200px width */
    }
    .branschLista span + span::before {
        margin: 0 1rem;
    }
    /* remove the .js-marquee display:flex rule entirely */
}