.wearable-gallery{position:relative;background-color:#fff;z-index:5}.wearable-gallery__spacer{height:calc(var(--scroll-length, 90) * 1vh * var(--item-count, 5));position:relative}.wearable-gallery__sticky{position:sticky;top:0;height:100dvh;overflow:hidden}.wearable-gallery__main{position:absolute;left:50%;top:50%;width:var(--main-width, 480px);aspect-ratio:85 / 110;transform:translate(-50%,-50%);z-index:2}.wearable-gallery__viewport{position:relative;width:100%;height:100%;overflow:hidden;border-radius:24px}.wearable-gallery__strip{position:absolute;top:0;left:0;display:flex;height:100%;will-change:transform}.wearable-gallery__item{flex:0 0 auto;width:var(--main-width, 480px);height:100%}.wearable-gallery__media{width:100%;height:100%;object-fit:cover;display:block}.wearable-gallery__frame{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid #fff;z-index:3;pointer-events:none;border-radius:24px}.wearable-gallery__thumbs-wrapper{position:absolute;top:0;height:100%;width:calc((100vw - var(--main-width, 480px)) / 2 - calc(var(--main-width, 480px) * var(--thumb-scale, .35) * .08) - 7px);overflow:hidden;pointer-events:none;z-index:1}.wearable-gallery__thumbs-wrapper.is-left{left:0}.wearable-gallery__thumbs-wrapper.is-right{right:0}.wearable-gallery__thumbs-move{position:absolute;top:50%;display:flex;flex-direction:row;gap:calc(var(--main-width, 480px) * var(--thumb-scale, .35) * .08);will-change:transform}.wearable-gallery__thumbs-wrapper.is-left .wearable-gallery__thumbs-move{left:100%}.wearable-gallery__thumbs-wrapper.is-right .wearable-gallery__thumbs-move{left:0}.wearable-gallery__thumb-item{flex:0 0 auto;width:calc(var(--main-width, 480px) * var(--thumb-scale, .35));aspect-ratio:85 / 110;opacity:.5;overflow:hidden;border-radius:24px}.wearable-gallery__thumb-media{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:989px){.wearable-gallery__main{width:72vw}}@media(max-width:749px){.wearable-gallery__main{--main-width: 80.3vw;width:80.3vw}.wearable-gallery__viewport,.wearable-gallery__frame,.wearable-gallery__thumb-item{border-radius:6px}.wearable-gallery__thumbs-wrapper{width:calc((100vw - var(--main-width, 480px)) / 2 - calc(var(--main-width, 480px) * var(--thumb-scale, .35) * .04) - 7px)}.wearable-gallery__thumbs-wrapper{--main-width: 80.3vw;--thumb-scale: .76}}
/*# sourceMappingURL=/cdn/shop/t/77/assets/scroll-image-gallery.css.map */