.scroll-right,
.scroll-left {
  position: absolute;
  top: 0;
  width: 30px;
  bottom: 0;
  cursor: pointer;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 !important;
  background-color: transparent !important;
  z-index: 1;
}

.scroll-right {
  right: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230c6ab3' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.scroll-left {
  left: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230c6ab3' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.js-side-scroll {
  width: 100%;
}

.js-side-scroll > div > div {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100rem;
  margin: 0 auto;
}

.js-side-scroll > div > div::-webkit-scrollbar {
  display: none;
}

.js-side-scroll > div > div .card {
  flex: 0 0 auto;
  margin: 0 2rem;
  width: 21rem;
  border: none;
}