scrolly-rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.scrolly-rail-controls {
    display: none;    
}

@media (max-width:767px) {
scrolly-rail {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}


scrolly-rail ul {
  display: flex;
  gap:16px;
  padding: 16px;
}

scrolly-rail li {
  scroll-snap-align: start;
}
    .btn-scrolly-rail--next {
        --x-offset-direction: -1;
        place-self: center end;
        margin-inline-end: var(--control-margin-offset);
    }
    .btn-scrolly-rail--previous {
        place-self: center start;
        margin-inline-start: var(--control-margin-offset);
    }
.btn-scrolly-rail.animate-appearance {
    transition-property: display, opacity, translate, scale;
    transition-behavior: allow-discrete;
}
.btn-scrolly-rail[class*="animate"] {
    transition: 225ms var(--ease-out-quart);
}
.btn-scrolly-rail {
    --icon-size: 1.25rem;
    --x-offset-direction: 1;
    --_size: 48px;
    --_x-offset: calc(6px * var(--x-offset-direction));
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    place-content: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    border-radius: 50%;
    color: rgba(17, 18, 27, 1);
    background-color: #F3F4F4;
    cursor: pointer;
    touch-action: manipulation;
    border: 1px solid #F3F4F4;
}
.scrolly-rail-controls {
width: 100%;
--stack-space: 0.5rem;
display: flex;
gap: 16px;
inline-size: -moz-fit-content;
margin-inline: auto;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
}
.btn-scrolly-rail.animate-appearance {
&[data-bound] {
    color:rgba(17, 18, 27, 0.25);

}
}
.btn-scrolly-rail.animate-appearance {
    @starting-style {
        color:rgba(17, 18, 27, 0.25);
    }
}
.btn-scrolly-rail.animate-appearance {
    @starting-style {
        color:rgba(17, 18, 27, 0.25);
    }
}

/* Container da paginação */

.scrolly-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
}

/* Dots */

.scrolly-rail__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #c8c8c8;
  cursor: pointer;
  appearance: none;

  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}

.scrolly-rail__dot.is-active {
  width: 32px;
  background: #005ca9;
}

/* Contador */

.scrolly-rail__counter {
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}



/* Counter */

.scrolly-rail__counter {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: #666;
}

      }