.g-scrolling-carousel {
    position: relative;
}
.g-scrolling-carousel .items {
    display:flex;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.g-scrolling-carousel .items > *{
    display:block;
    /* min-width:144px; */
    user-select: none;
}

.jc-right,
.jc-left {
    width: 36px;
      height: 36px;
      color: #8b28f7;
      margin-bottom: auto;
      margin-top: auto;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 8px 0 rgba(0,0,0,0.20);
      background: #d5d5dd42;
      border-radius: 50%;
      cursor: pointer;
      position: absolute;
      top: 0;
      bottom: 30%;
      z-index: 2;
      opacity: 0.94;
      font-size: 32px;
      backdrop-filter: blur(3px);
      transition: .5s;
}

.children .jc-right,
.children .jc-left {
   width: 32px;
   height: 32px;
   color: #8b28f7;
   margin-bottom: auto;
   margin-top: auto;
   box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 8px 0 rgba(0,0,0,0.20);
   background: #d5d5dd42;
   border-radius: 50%;
   cursor: pointer;
   position: absolute;
   top: 0;
   bottom: 0;
   z-index: 2;
   opacity: 0.94;
   font-size: 28px;
   backdrop-filter: blur(3px);
   transition: .5s;
}

.jc-right {
    right:-20px;
}
.jc-left {
    left:-18px;
}
.jc-right i, .jc-left i {
   margin: 2px 9px;
}
.jc-right:hover,
.jc-left:hover{
    opacity: 0.45;
    transition: .5s;
}
.jc-right:active,
.jc-left:active{
    background-color: rgba(245, 245, 245, 0.98);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 8px 0 rgba(0,0,0,0.20);
}

@media (max-width: 767px) {
   .jc-left {
      left:0;
   }
   .jc-right {
      right: 0;
   }
}

@media (prefers-color-scheme: light) {
 .jc-left,
 .jc-right {
    color: #4d5060;
    background: #ffffff42;
 }  
}