@wethegit/react-gallery/dist/style.css

A customizable, accessible gallery component for React projects.

.gallery-module__visually-hidden__8zDx-H{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.gallery-module__gallery__VCgDes{--position-offset: 0px;--touch-offset: 0;--item-width: min(75%, 1000px);--gap: 25vw;--active-gap: 0px;--active: 0;--duration: .5s;position:relative;width:100%}.gallery-module__gallery--draggable__f9wp7C{touch-action:pan-y}.gallery-module__gallery__main__iLoFEC{display:grid;grid-template-areas:"item";list-style:none;margin:0;padding:0;position:relative}.gallery-module__gallery__item__Y54ZpS{--x: calc( (var(--touch-offset, 0) * 1px) + var(--position-offset) + (var(--active-gap) * var(--side)) + (var(--item-width) + var(--gap)) * (var(--i) - var(--selected)) );--delay: calc(0s * var(--center-offset, 0));grid-area:item;margin:0 auto;padding:0;transform:translate(var(--x));transition:transform var(--duration);width:var(--item-width);z-index:calc(var(--total) - var(--center-offset))}.gallery-module__gallery__item--draggable__bk-grQ img{pointer-events:none;-webkit-user-select:none;user-select:none}.gallery-module__gallery__item--dragging__QyPOcL{transition:none!important}.gallery-module__gallery__nav__LiuEC8{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:0;color:inherit;cursor:pointer;display:inline-block;font:inherit;padding:0}.gallery-module__gallery__pagination__Fq3Nx2{--gap: 10px;display:grid;gap:var(--gap);grid-auto-flow:column;justify-content:center}.gallery-module__gallery__pagination-item__ys5srP{line-height:1}