:root{--image-list-height: 85vh}.real-life-images-container::backdrop{background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:popupBackdropFadeOut .5s forwards}.real-life-images-container[open]::backdrop{animation:popupBackdropFadeIn .5s forwards}.real-life-images-container[open]{display:block;animation:popupFadeIn .5s forwards}.real-life-images-container{position:fixed;left:50%;top:50%;border-radius:24px;translate:-50% -50%;background-color:#1f1f1f;width:882px;height:var(--image-list-height);border:none;transition:display .3s allow-discrete,overlay .3s allow-discrete;animation:popupFadeOut .5s forwards}.inner-dialog{width:100%}.real-life-images-close-btn-container{position:absolute;top:40px;right:36px;cursor:pointer}.real-life-images-close-btn{-webkit-appearance:none;appearance:none;border:none;background:none;cursor:pointer}.real-life-images-close-btn img{height:16px;width:16px;filter:brightness(1) invert(1)}.real-life-images-container .header{color:#fff;font-weight:600;font-size:28px;line-height:120%;margin:36px 0 24px 40px;letter-spacing:.02em}.real-life-images-container .varient-selector{display:flex;gap:12px;margin-left:40px;margin-bottom:26px}.real-life-images-container .varient-selector button{all:unset;border-radius:22px;color:#9c9c9c;border:solid #101010 1px;background-color:#101010;height:44px;display:flex;align-items:center;justify-content:center;padding:0 24px;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}.real-life-images-container .varient-selector button:active{border-color:#fff9;background-color:#1f1f1f}.real-life-images-container .varient-selector .active{color:#31b261;border:solid #31B261 1px}.real-life-images-container .varient-selector .disable{opacity:.5;cursor:unset;color:#9c9c9c;border:solid #101010 1px}.real-life-images-container .image-list{margin-left:20px;height:calc(var(--image-list-height) - 166.2px);overflow-y:scroll;padding-bottom:24px;margin-right:20px;padding-right:10px;position:relative}.real-life-images-container .image-list::-webkit-scrollbar{width:10px;border-radius:4px}.real-life-images-container .scroll-background{position:absolute;height:calc(var(--image-list-height) - 166px - 39px);width:10px;background-color:#393939;right:20px;bottom:40px;border-radius:4px}.real-life-images-container .image-list::-webkit-scrollbar-track-piece:end{margin-bottom:40px}.real-life-images-container .image-list::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.real-life-images-container .image-list .variant-image-list{display:none;gap:12px 16px;grid-template-columns:1fr 1fr;transition:all .3s ease}.real-life-images-container .image-list .variant-image-list.active{display:grid}.real-life-images-container .image-list img{border-radius:24px;width:100%;max-width:100%;max-height:400px;height:max-content;object-fit:cover}.real-life-images-container .image-list img.full{grid-column:span 2}@media screen and (orientation: portrait) and (max-width: 1081px){.real-life-images-container{width:calc(100% - 32px);height:80vh;border-radius:16px;overflow:hidden}.inner-dialog{padding:0;height:100%}.real-life-images-close-btn-container{top:24px;right:24px}.real-life-images-container .header{color:#fff;font-weight:600;font-size:16px;line-height:140%;letter-spacing:.02em;padding:28px 16px 0;margin:0 0 16px}.real-life-images-container .varient-selector{gap:6px;margin:0 0 20px;font-size:12px;font-weight:500;flex-direction:row;padding:0 16px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.real-life-images-container .varient-selector button{border-radius:17px;height:34px;padding:0 16px}.real-life-images-container .varient-selector button div{display:block;width:max-content}.real-life-images-container .image-list{height:calc(80vh - 122px);overflow-y:auto;margin:0;padding:0 10px 10px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.real-life-images-container .scroll-background{display:none}.real-life-images-container .image-list .variant-image-list{display:none;gap:12px;grid-template-columns:1fr}.real-life-images-container .image-list img{border-radius:16px;width:100%;max-width:100%;max-height:308px;height:max-content;object-fit:cover}.real-life-images-container .image-list img.full{grid-column:span 1}}
/*# sourceMappingURL=/cdn/shop/t/76/assets/popup_real_life_images.css.map */