:host { display: block; width: 100%; box-sizing: border-box; container: host / inline-size; }
.gallery { position: relative; }
.gallery_scroller { overflow-anchor: none; scroll-snap-type: x mandatory; overflow: scroll hidden; display: flex; scrollbar-width: none; }
.gallery_scroller::-webkit-scrollbar { display: none; }
::slotted(*) { scroll-snap-align: var(--scroll-snap-align); scroll-snap-stop: var(--scroll-snap-stop); }
::slotted(:first-child) { margin-left: var(--first-slide-left-margin); }
::slotted(:last-child) { margin-right: var(--last-slide-right-margin); }
.gallery .btn { position: absolute; border-radius: 6px; background-color: rgba(0, 0, 0, 0.65); background-position: 50% 50%; background-repeat: no-repeat; z-index: 50; fill: white; color: white; padding: 8px 3px; cursor: pointer; }
.custom-button-placing .btn { top: var(--buttonTopPosition); transform: var(--buttonTranslateY); }
.buttons { display: none; }
.btn { top: calc(var(--buttonTopPosition) - 15px); transform: var(--buttonTranslateY); }
.gallery .btn.next { right: 8px; }
.gallery .btn.prev { left: 8px; }
@container host (min-width: 768px) {
  .buttons { display: block; }
}