:host {
  display: block;
  text-align: center;
  position: relative;
  margin-bottom: 2rem;
}
@supports (scrollbar-width: thin) {
  :host {
    scrollbar-width: thin;
    scrollbar-color: transparent;
  }
  :host(:hover) {
    scrollbar-color: gray;
  }
}

::slotted(li) {
  flex: 1 0 auto;
  display: block;
  width: 100%;
  scroll-snap-align: center;
  margin: 0;
}
@media screen and (orientation: landscape) {
  ::slotted(li) {
    width: 75%;
    max-height: 50vh;
  }
}

::-webkit-scrollbar {
  height: 0.5rem;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 100vh;
}

:host(:hover) ::-webkit-scrollbar-thumb {
  background: hsl(var(--brand-color-2-hsl));
}

slot {
  display: var(--carousel-display, flex);
  width: 100%;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

div {
  position: absolute;
  inset: auto 0 0.5rem;
  display: var(--carousel-display, flex);
  justify-content: center;
}
button {
  display: var(--carousel-display, flex);
  margin: 0;
  padding: 0;
  background: hsl(var(--brand-color-1-hsl));
  background-clip: content-box;
  border: 0.5rem solid transparent;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}
button.current:not(.current + .current) {
  background-color: hsl(var(--brand-color-4-hsl));
}