.scroller-menu-wrapper {
   position: relative;
   width: 70%;
   height: 400px; /* Height of the scroll bar */
   margin: 5rem auto;
   overflow-x: hidden;
   overflow-y: hidden;
}

.scroller-menu {
   background: var(--lightjadegruen);
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height: 400px;
}

.scroller-menu .item {
   display: inline-block;
   width: 400px;
   padding: 1em;
   margin: auto;
}

.scroller-menu img {
   width: 100%;
   height: 370px;
}

.paddle {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 3em;
}

.left-paddle {
   left: 0;
   border-right: 2px solid var(--lightjadegruen);
   border-top: none;
   border-bottom: none;
   border-left: none;
   background: #fff;
}

.right-paddle {
   right: 0;
   border-left: 2px solid var(--lightjadegruen);
   border-top: none;
   border-bottom: none;
   border-right: none;
   background: #fff;
}

.hidden {
   display: none;
}

button {
   display: block;
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
   .scroller-menu-wrapper {
      width: 96%;
   }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
   .scroller-menu-wrapper {
      width: 96%;
   }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
   .scroller-menu-wrapper {
      width: 100%;
   }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
   .scroller-menu-wrapper {
      width: 100%;
   }
}