.gallery-section{position:relative;overflow:hidden;background-repeat:no-repeat;background-size:auto 100%;transition:background-position 1.5s ease-in-out;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;min-height:600px;margin-bottom:25px}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInText{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutText{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.slider-content>*,.image-container,.slider{opacity:0;transform:translateY(20px)}.slider-content>.animate,.image-container.animate,.slider.animate,.prev-btn.animate,.next-btn.animate{animation:slideUpFadeIn .8s ease-out forwards}.slider-content h2,.slider-content p,.slider-content .button{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.slider-content .fade-out-text{animation:fadeOutText .3s ease-out forwards}.slider-content .fade-in-text{animation:fadeInText .3s ease-out forwards}.slider-content-item{margin-top:15px}.gallery-container{grid-column:2;display:flex;transition:transform .5s ease-in-out;width:100%;align-items:center}.before-after-slider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;transition:opacity .3s ease-in-out;max-width:1200px;margin:0 auto}.before-after-slider:not(.active){display:none}.before-after-slider.active{display:grid}.slider-content{padding:20px;text-align:left}.slider-wrapper{display:flex;align-items:center;gap:10px;position:relative;justify-content:flex-end}.image-container{position:relative;width:600px;height:600px;overflow:hidden;border-radius:10px;box-shadow:0 0 20px #0003}.before-image{display:block;width:100%;height:100%;object-fit:cover}.after-image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:block;clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.after-image{display:block;width:100%;height:100%;object-fit:cover}.slider{position:absolute;top:0;left:50%;width:4px;height:100%;background-color:#fff;cursor:ew-resize;transform:translate(-50%);z-index:10}.slider:before{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;background-color:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #00000080}.slider:after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;color:#333}.gallery-navigation{display:flex;flex-direction:column;align-items:center;justify-content:center}.prev-btn,.next-btn{background-color:#000000b3;color:#fff;border:none;padding:15px 20px;cursor:pointer;border-radius:50%;margin-bottom:15px;font-size:1.5em;line-height:1;transition:background-color .3s ease,transform .3s ease}.prev-btn:hover,.next-btn:hover{background-color:#000000e6;transform:scale(1.1)}@media (max-width: 768px){.before-after-slider{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:10px}.slider-content{text-align:center}.gallery-navigation{flex-direction:row-reverse;justify-content:center;gap:20px}.slider-wrapper{justify-content:center}.image-container{width:90vw;height:90vw}}
/*# sourceMappingURL=/cdn/shop/t/25/assets/component-before-after-slider.css.map */