/*---------------------------------------------------------------*/
/*     Media Scroller                                            */
/*---------------------------------------------------------------*/
.media-scroller{
  display: grid;
  gap: 30px;
  grid-auto-flow:column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  margin-block: 50px;
  position: relative;
}

.snaps-inline{
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 20px;
}

.snaps-inline > *{
  scroll-snap-align:start;
}

.media-scroller::-webkit-scrollbar{
  height: 1em;
  width: 50%;
}

.media-scroller::-webkit-scrollbar-track{
  background-color: var(--pink);
}

.media-scroller::-webkit-scrollbar-thumb{
  background-color: var(--blue);
}

.media-scroller .child{
  padding-block: 3rem;
}

.vp .media-scroller{
  width: 90%;
}

@media (width >= 696px){
  .media-scroller{
    grid-auto-columns: 70%;

  }
}