.scroller {
    max-width: 100%;
  }

.scroller img {
  max-width: 31.25rem;
}

  .scroller__inner {
    padding-block: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  .scroller[data-animated="true"] {
    overflow: hidden;
  }

  .scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }

  .scroller[data-direction="right"] {
    --_animation-direction: reverse;
  }

  .scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }

  .scroller[data-speed="fast"] {
    --_animation-duration: 20s;
  }

  .scroller[data-speed="medium"] {
    --_animation-duration: 40s;
  }

  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }
  .scroller[data-animated="true"] .scroller__inner:hover {animation-play-state: paused;}
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.3125rem));
    }
  }
  .scroller__inner {cursor: grab;}

  @media (min-width:768px) and (max-width:991.98px) {
    #service .col-md-9 {
    width: 90%}
  }

  @media only screen and (max-width: 900px) {
  .scroller img {
    max-width: 12rem;
  }
}