:root{--section-padding: 80px;--section-bg-color: transparent;--container-height: 600px;--animation-duration: 600ms;--animation-distance: 50px;--images-border-radius: 8px;--shadow-color: rgba(0, 0, 0, 0.15);--shadow-blur: 20px;--shadow-offset-y: 10px;--image1-width: 400px;--image1-position-x: 10%;--image1-position-y: 20%;--image1-z-index: 4;--image2-width: 350px;--image2-position-x: 60%;--image2-position-y: 10%;--image2-z-index: 3;--image3-width: 300px;--image3-position-x: 15%;--image3-position-y: 65%;--image3-z-index: 2;--image4-width: 380px;--image4-position-x: 70%;--image4-position-y: 55%;--image4-z-index: 1}.g3w-animated-screenshots{padding:var(--section-padding);background:var(--section-bg-color);width:100vw;position:relative}.g3w-animated-screenshots__container{position:relative;width:100%;max-width:1400px;height:var(--container-height);margin:0 auto;margin-bottom:-7px}.g3w-animated-screenshots__image-wrapper{position:absolute;opacity:0;transition:all var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);will-change:transform,opacity}.g3w-animated-screenshots__image-wrapper[data-direction=from_bottom]{transform:translateY(var(--animation-distance))}.g3w-animated-screenshots__image-wrapper[data-direction=from_top]{transform:translateY(calc(var(--animation-distance) * -1))}.g3w-animated-screenshots__image-wrapper[data-direction=from_left]{transform:translateX(calc(var(--animation-distance) * -1))}.g3w-animated-screenshots__image-wrapper[data-direction=from_right]{transform:translateX(var(--animation-distance))}.g3w-animated-screenshots__image-wrapper[data-direction=from_center]{transform:scale(0.8)}.g3w-animated-screenshots__image-wrapper.g3w-animated{opacity:1;transform:translate(0) scale(1)}.g3w-animated-screenshots__image-wrapper--1{left:var(--image1-position-x);bottom:var(--image1-position-y);z-index:var(--image1-z-index);width:var(--image1-width)}.g3w-animated-screenshots__image-wrapper--2{left:var(--image2-position-x);bottom:var(--image2-position-y);z-index:var(--image2-z-index);width:var(--image2-width)}.g3w-animated-screenshots__image-wrapper--3{left:var(--image3-position-x);bottom:var(--image3-position-y);z-index:var(--image3-z-index);width:var(--image3-width)}.g3w-animated-screenshots__image-wrapper--4{left:var(--image4-position-x);bottom:var(--image4-position-y);z-index:var(--image4-z-index);width:var(--image4-width)}.g3w-animated-screenshots__image{width:100%;max-width:100%;height:auto;border-radius:var(--images-border-radius);display:block;object-fit:cover}.g3w-animated-screenshots[data-shadow=on] .g3w-animated-screenshots__image{box-shadow:0 var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color)}@media(max-width: 980px){.g3w-animated-screenshots{padding:var(--section-padding-tablet, var(--section-padding))}.g3w-animated-screenshots__container{height:var(--container-height-tablet, var(--container-height))}.g3w-animated-screenshots__image-wrapper[data-direction=from_bottom]{transform:translateY(var(--animation-distance-tablet, var(--animation-distance)))}.g3w-animated-screenshots__image-wrapper[data-direction=from_top]{transform:translateY(calc((var(--animation-distance-tablet, var(--animation-distance))) * -1))}.g3w-animated-screenshots__image-wrapper[data-direction=from_left]{transform:translateX(calc((var(--animation-distance-tablet, var(--animation-distance))) * -1))}.g3w-animated-screenshots__image-wrapper[data-direction=from_right]{transform:translateX(var(--animation-distance-tablet, var(--animation-distance)))}.g3w-animated-screenshots__image-wrapper--1{left:var(--image1-position-x-tablet, var(--image1-position-x));bottom:var(--image1-position-y-tablet, var(--image1-position-y));width:var(--image1-width-tablet, var(--image1-width))}.g3w-animated-screenshots__image-wrapper--2{left:var(--image2-position-x-tablet, var(--image2-position-x));bottom:var(--image2-position-y-tablet, var(--image2-position-y));width:var(--image2-width-tablet, var(--image2-width))}.g3w-animated-screenshots__image-wrapper--3{left:var(--image3-position-x-tablet, var(--image3-position-x));bottom:var(--image3-position-y-tablet, var(--image3-position-y));width:var(--image3-width-tablet, var(--image3-width))}.g3w-animated-screenshots__image-wrapper--4{left:var(--image4-position-x-tablet, var(--image4-position-x));bottom:var(--image4-position-y-tablet, var(--image4-position-y));width:var(--image4-width-tablet, var(--image4-width))}.g3w-animated-screenshots__image{border-radius:var(--images-border-radius-tablet, var(--images-border-radius))}.g3w-animated-screenshots[data-shadow=on] .g3w-animated-screenshots__image{box-shadow:0 var(--shadow-offset-y-tablet, var(--shadow-offset-y)) var(--shadow-blur-tablet, var(--shadow-blur)) var(--shadow-color)}}@media(max-width: 767px){.g3w-animated-screenshots{padding:var(--section-padding-mobile, var(--section-padding-tablet, var(--section-padding)))}.g3w-animated-screenshots__container{height:var(--container-height-mobile, var(--container-height-tablet, var(--container-height)))}.g3w-animated-screenshots__image-wrapper[data-direction=from_bottom]{transform:translateY(var(--animation-distance-mobile, var(--animation-distance-tablet, var(--animation-distance))))}.g3w-animated-screenshots__image-wrapper[data-direction=from_top]{transform:translateY(calc((var(--animation-distance-mobile, var(--animation-distance-tablet, var(--animation-distance)))) * -1))}.g3w-animated-screenshots__image-wrapper[data-direction=from_left]{transform:translateX(calc((var(--animation-distance-mobile, var(--animation-distance-tablet, var(--animation-distance)))) * -1))}.g3w-animated-screenshots__image-wrapper[data-direction=from_right]{transform:translateX(var(--animation-distance-mobile, var(--animation-distance-tablet, var(--animation-distance))))}.g3w-animated-screenshots__image-wrapper--1{left:var(--image1-position-x-mobile, var(--image1-position-x-tablet, var(--image1-position-x)));bottom:var(--image1-position-y-mobile, var(--image1-position-y-tablet, var(--image1-position-y)));width:var(--image1-width-mobile, var(--image1-width-tablet, var(--image1-width)))}.g3w-animated-screenshots__image-wrapper--2{left:var(--image2-position-x-mobile, var(--image2-position-x-tablet, var(--image2-position-x)));bottom:var(--image2-position-y-mobile, var(--image2-position-y-tablet, var(--image2-position-y)));width:var(--image2-width-mobile, var(--image2-width-tablet, var(--image2-width)))}.g3w-animated-screenshots__image-wrapper--3{left:var(--image3-position-x-mobile, var(--image3-position-x-tablet, var(--image3-position-x)));bottom:var(--image3-position-y-mobile, var(--image3-position-y-tablet, var(--image3-position-y)));width:var(--image3-width-mobile, var(--image3-width-tablet, var(--image3-width)))}.g3w-animated-screenshots__image-wrapper--4{left:var(--image4-position-x-mobile, var(--image4-position-x-tablet, var(--image4-position-x)));bottom:var(--image4-position-y-mobile, var(--image4-position-y-tablet, var(--image4-position-y)));width:var(--image4-width-mobile, var(--image4-width-tablet, var(--image4-width)))}.g3w-animated-screenshots__image{border-radius:var(--images-border-radius-mobile, var(--images-border-radius-tablet, var(--images-border-radius)))}.g3w-animated-screenshots[data-shadow=on] .g3w-animated-screenshots__image{box-shadow:0 var(--shadow-offset-y-mobile, var(--shadow-offset-y-tablet, var(--shadow-offset-y))) var(--shadow-blur-mobile, var(--shadow-blur-tablet, var(--shadow-blur))) var(--shadow-color)}}
