.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; 
}

.carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* SCROLL MARKERS */
/* create marker group */
/* create markers for each item */
.carousel {
  /* create markers 'after' scroller 
  scroll-marker-group: after;*/

  /* create markers container and own dots layout */
  &::scroll-marker-group {
    grid-area: markers; /* place markers in parent grid area */
    /* 15px by 15px horizontal grid - size of dots */
    display: grid;
    place-content: safe center;
    grid: 30px / auto-flow 30px;
    gap: 15px;
    padding: 15px;
    padding-top:0px;
    scroll-padding: 15px;
    /* handle overflow */
    overflow: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    
/* Slide (botella) */
.content > li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0.4;
  transform: scale(0.88);
  transition:
    transform 0.4s cubic-bezier(.4, 0, .2, 1),
    opacity 0.4s cubic-bezier(.4, 0, .2, 1);
  scroll-snap-align: center;
}

/* Slide activo */
.content > li.is-active {
  opacity: 1;
  transform: scale(1);
}

    
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  /* a marker for each <li> */
  & > .content > li {
    /* create by adding content */
    &::scroll-marker {
      content: " "; /* empty content is fine, just like ::before */
      /* style it as you need */
      border: 1px solid #f0f0f0;
      border-radius: 50%;
      color:white
      outline-offset: 4px;
      -webkit-tap-highlight-color: transparent;
      /* snap if group is overflowing */
      scroll-snap-align: center;
    }
    
    &::scroll-marker:is(:hover, :focus-visible) {
      border-color: #ef0000;
    }
    
    &::scroll-marker:target-current {
      background: #ef0000;
      border-color: #ef0000;
    }
  }
}
@layer support.demo {
  .scroll-layout {
    display: grid;
/*     border: 1px dashed gray; */
    
    /* try a different layout =) */
    grid-template-areas: 
      "left scroll right"
      ". markers .";
    
    /* just place items in the grid */
    grid-template-areas: 
      "scroll scroll scroll"
      "left markers right";
    
    grid-template-columns: auto 1fr auto;

    .carousel {
      grid-area: scroll;
    }
  }
  
  .carousel {
    max-inline-size: 100%;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }

@media (min-width: 420px) {
  .content {
    grid: 95vmin / auto-flow 95vmin !important;
  }
}
  
@media (min-width:820px) {
  .content {
    grid: 50vmin / auto-flow 85vmin !important;
  }
}


@media (min-width:1024px) {
  .content {
    grid: 40vmin / auto-flow 65vmin !important;
  }
}
  
@media (min-width: 1025px) and (max-width: 1799px) {
  .content {
    grid: 60vmin / auto-flow 45vmin !important
  }
}

@media (min-width: 1800px) {
  .content {
    grid: 80vmin / auto-flow 80vmin !important;
  }
}
  .carousel::scroll-marker-group,
.carousel > .content > li::scroll-marker {
  pointer-events: none;
}
  .carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}
  .carousel-control-prev {
  left: 15px;
}

.carousel-control-next {
  right: 15px;
}

  .content {
    display: grid;
    grid: 95vmin / auto-flow 90vmin;
    gap: 15px;
    padding: 0;
    margin: 0;

    > li {
      list-style-type: none;
      width:100%;
      overflow:hidden;
    }
  }
}
.scroll-layout {
  position: relative;
}

.nav {
  margin-left: 10px;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav.prev { left: 10px; }
.nav.next { right: 10px; }

.nav:active {
  transform: translateY(-50%) scale(0.95);
}