.demo-animation{--gridPadding:16px;--gridGutter:10px;--gutterAmountHorizontal:6;--gutterAmountVertical:13;padding:var(--gridPadding);position:relative;margin:16px 0;overflow:hidden}@media all and (min-width:768px){.demo-animation{--gridPadding:30px;--gridGutter:6px;--gutterAmountHorizontal:24;--gutterAmountVertical:26;margin:0}}@media all and (min-width:1024px){.demo-animation{--gridGutter:12px}}.demo-animation__grid{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;padding-top:224%;background:#f1f1f1}@media all and (min-width:768px){.demo-animation__grid{padding-top:101.1%}}.demo-animation__rows,.demo-animation__cols{position:absolute;width:100%;height:100%;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.demo-animation__rows span,.demo-animation__cols span{width:100%;height:var(--gridGutter);background:#fff}@media all and (max-width:767px){.demo-animation__rows span:nth-child(n+13),.demo-animation__cols span:nth-child(n+13){display:none}}.demo-animation__cols{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.demo-animation__cols span{width:var(--gridGutter);height:100%}@media all and (max-width:767px){.demo-animation__cols span:nth-child(n+6){display:none}}.demo-animation__elements{position:absolute;width:calc(100% - (var(--gridPadding)*2));height:calc(100% - (var(--gridPadding)*2));top:var(--gridPadding);left:var(--gridPadding)}.demo-animation__images,.demo-animation__copy{position:absolute;top:0;left:0;width:100%;height:100%}.demo-animation__image{--imageDelay:0s;--borderRadius:8px;--imagePadding:3%;position:absolute;border:2px solid transparent;z-index:2}.demo-animation__image[data-has-intersected=true]{border-color:#6085f0}.demo-animation__image[data-has-intersected=true] .demo-animation__controls,.demo-animation__image[data-has-intersected=true] img,.demo-animation__image[data-has-intersected=true] svg{opacity:1}@media all and (max-width:767px){.demo-animation__image:nth-child(n+5){display:none}}body:not(.has-reduced-motion) .demo-animation__image .demo-animation__controls{-webkit-transition-delay:calc(var(--imageDelay) + .4s);transition-delay:calc(var(--imageDelay) + .4s)}body:not(.has-reduced-motion) .demo-animation__image img{-webkit-transition:opacity .2s cubic-bezier(.645,.045,.355,1);transition:opacity .2s cubic-bezier(.645,.045,.355,1);-webkit-transition-delay:var(--imageDelay);transition-delay:var(--imageDelay)}.demo-animation__image:nth-child(1){--borderRadius:100%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*2) + (var(--gridGutter)*(2 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 0px);left:0;top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*0) + (var(--gridGutter)*(0 - 1)) + var(--gridGutter));z-index:1}body:not(.has-reduced-motion) .demo-animation__image:nth-child(1){-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),width 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),height 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),left .7s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 1.8s),top .7s cubic-bezier(.455,.03,.515,.955) calc(var(--imageDelay) + 1.8s);transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),width 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),height 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),left .7s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 1.8s),top .7s cubic-bezier(.455,.03,.515,.955) calc(var(--imageDelay) + 1.8s)}.demo-animation__image:nth-child(1)[data-has-intersected=true]{width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*1) + (var(--gridGutter)*(1 - 1)) + var(--gridGutter))}@media all and (min-width:768px){.demo-animation__image:nth-child(1){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*2) + (var(--gridGutter)*(2 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*1) + (var(--gridGutter)*(1 - 1)) + var(--gridGutter))}.demo-animation__image:nth-child(1)[data-has-intersected=true]{width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*6) + (var(--gridGutter)*(6 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*6) + (var(--gridGutter)*(6 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + var(--gridGutter))}}.demo-animation__image:nth-child(2){--imageDelay:0.5s;--imagePadding:13% 4%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*2) + (var(--gridGutter)*(2 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*0) + (var(--gridGutter)*(0 - 1)) + var(--gridGutter))}body:not(.has-reduced-motion) .demo-animation__image:nth-child(2){-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .8s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .9s);transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .8s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .9s)}.demo-animation__image:nth-child(2)[data-has-intersected=true]{left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + var(--gridGutter))}@media all and (min-width:768px){.demo-animation__image:nth-child(2){--imagePadding:5%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*4) + (var(--gridGutter)*(4 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*13) + (var(--gridGutter)*(13 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*6) + (var(--gridGutter)*(6 - 1)) + var(--gridGutter))}.demo-animation__image:nth-child(2)[data-has-intersected=true]{left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*11) + (var(--gridGutter)*(11 - 1)) + var(--gridGutter))}}.demo-animation__image:nth-child(3){--imagePadding:5%;--imageDelay:0.6s;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*2) + (var(--gridGutter)*(2 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*9) + (var(--gridGutter)*(9 - 1)) + var(--gridGutter))}body:not(.has-reduced-motion) .demo-animation__image:nth-child(3){-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),top .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 1.5s),height 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 2s),width 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 2s);transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),top .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 1.5s),height 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 2s),width 1s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 2s)}.demo-animation__image:nth-child(3)[data-has-intersected=true]{left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*10) + (var(--gridGutter)*(10 - 1)) + var(--gridGutter))}@media all and (min-width:768px){.demo-animation__image:nth-child(3){--imagePadding:3%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*5) + (var(--gridGutter)*(5 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*7) + (var(--gridGutter)*(7 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*19) + (var(--gridGutter)*(19 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*11) + (var(--gridGutter)*(11 - 1)) + var(--gridGutter))}.demo-animation__image:nth-child(3)[data-has-intersected=true]{width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*6) + (var(--gridGutter)*(6 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*8) + (var(--gridGutter)*(8 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*16) + (var(--gridGutter)*(16 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*9) + (var(--gridGutter)*(9 - 1)) + var(--gridGutter))}}.demo-animation__image:nth-child(4){--imageDelay:0.7s;--imagePadding:15% 4%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 0px);left:0;top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*11) + (var(--gridGutter)*(11 - 1)) + var(--gridGutter))}body:not(.has-reduced-motion) .demo-animation__image:nth-child(4){-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),top .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s);transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),top .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s)}.demo-animation__image:nth-child(4)[data-has-intersected=true]{top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*9) + (var(--gridGutter)*(9 - 1)) + var(--gridGutter))}@media all and (min-width:768px){.demo-animation__image:nth-child(4){--imagePadding:5%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*4) + (var(--gridGutter)*(4 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*10) + (var(--gridGutter)*(10 - 1)) + var(--gridGutter))}.demo-animation__image:nth-child(4)[data-has-intersected=true]{left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*4) + (var(--gridGutter)*(4 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*11) + (var(--gridGutter)*(11 - 1)) + var(--gridGutter))}}.demo-animation__image:nth-child(5){--imageDelay:0.8s;--borderRadius:56px;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*5) + (var(--gridGutter)*(5 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*5) + (var(--gridGutter)*(5 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*4) + (var(--gridGutter)*(4 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*14) + (var(--gridGutter)*(14 - 1)) + var(--gridGutter))}body:not(.has-reduced-motion) .demo-animation__image:nth-child(5){-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),width .7s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 1.5s),height .7s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 2s);transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),left .5s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s),width .7s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 1.5s),height .7s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + 2s)}.demo-animation__image:nth-child(5)[data-has-intersected=true]{width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*6) + (var(--gridGutter)*(6 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*6) + (var(--gridGutter)*(6 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*2) + (var(--gridGutter)*(2 - 1)) + var(--gridGutter))}.demo-animation__image:nth-child(6){--imageDelay:0s;--imagePadding:5%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*5) + (var(--gridGutter)*(5 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*13) + (var(--gridGutter)*(13 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*23) + (var(--gridGutter)*(23 - 1)) + var(--gridGutter))}body:not(.has-reduced-motion) .demo-animation__image:nth-child(6){-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),top 1.2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s);transition:border-color .2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .4s),top 1.2s cubic-bezier(.645,.045,.355,1) calc(var(--imageDelay) + .7s)}.demo-animation__image:nth-child(6)[data-has-intersected=true]{top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*21) + (var(--gridGutter)*(21 - 1)) + var(--gridGutter))}.demo-animation__text{--imageDelay:0s;--imagePadding:3%;position:absolute;border:2px solid transparent;z-index:2;height:8.4%}.demo-animation__text[data-has-intersected=true] svg{opacity:1}body:not(.has-reduced-motion) .demo-animation__text svg{-webkit-transition:opacity .2s cubic-bezier(.645,.045,.355,1) var(--imageDelay);transition:opacity .2s cubic-bezier(.645,.045,.355,1) var(--imageDelay)}.demo-animation__text:nth-child(1){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*4) + (var(--gridGutter)*(4 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*1) + (var(--gridGutter)*(1 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + var(--gridGutter))}@media all and (min-width:768px){.demo-animation__text:nth-child(1){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*10) + (var(--gridGutter)*(10 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*7) + (var(--gridGutter)*(7 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*4) + (var(--gridGutter)*(4 - 1)) + var(--gridGutter))}}.demo-animation__text:nth-child(2){--imageDelay:0.3s;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*4) + (var(--gridGutter)*(4 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*1) + (var(--gridGutter)*(1 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 16.8%)}@media all and (min-width:768px){.demo-animation__text:nth-child(2){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*10) + (var(--gridGutter)*(10 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*7) + (var(--gridGutter)*(7 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*7) + (var(--gridGutter)*(7 - 1)) + var(--gridGutter))}}.demo-animation__text:nth-child(3){--imageDelay:0.5s;--imagePadding:2.2% 0 0;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*6) + (var(--gridGutter)*(6 - 1)) + 0px);left:0;top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 24.2%)}@media all and (min-width:768px){.demo-animation__text:nth-child(3){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*14) + (var(--gridGutter)*(14 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*5) + (var(--gridGutter)*(5 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*10) + (var(--gridGutter)*(10 - 1)) + var(--gridGutter))}}.demo-animation__text:nth-child(4){--imageDelay:0.7s;--imagePadding:2.5%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*6) + (var(--gridGutter)*(6 - 1)) + 0px);left:0;top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 31.8%)}@media all and (min-width:768px){.demo-animation__text:nth-child(4){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*12) + (var(--gridGutter)*(12 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*6) + (var(--gridGutter)*(6 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*13) + (var(--gridGutter)*(13 - 1)) + var(--gridGutter))}}.demo-animation__text:nth-child(5){--imageDelay:0.9s;--imagePadding:4%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*2) + (var(--gridGutter)*(2 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 39.3%)}@media all and (min-width:768px){.demo-animation__text:nth-child(5){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*8) + (var(--gridGutter)*(8 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*8) + (var(--gridGutter)*(8 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*16) + (var(--gridGutter)*(16 - 1)) + var(--gridGutter))}}.demo-animation__text:nth-child(6){--imageDelay:1.1s;--imagePadding:3%;width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*4) + (var(--gridGutter)*(4 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*1) + (var(--gridGutter)*(1 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*2) + (var(--gridGutter)*(2 - 1)) + 47.3%)}@media all and (min-width:768px){.demo-animation__text:nth-child(6){width:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*10) + (var(--gridGutter)*(10 - 1)) + 0px);height:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*3) + (var(--gridGutter)*(3 - 1)) + 0px);left:calc((((100% - (var(--gridGutter)*(var(--gutterAmountHorizontal) - 1)))/var(--gutterAmountHorizontal))*7) + (var(--gridGutter)*(7 - 1)) + var(--gridGutter));top:calc((((100% - (var(--gridGutter)*(var(--gutterAmountVertical) - 1)))/var(--gutterAmountVertical))*19) + (var(--gridGutter)*(19 - 1)) + var(--gridGutter))}}.demo-animation__image-wrapper{width:100%;height:100%;padding:var(--imagePadding);text-align:center}.demo-animation__image-wrapper img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;opacity:0;border-radius:var(--borderRadius)}.demo-animation__image-wrapper svg{height:100%;width:auto;opacity:0}.demo-animation__controls{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;-webkit-transition:opacity .2s cubic-bezier(.645,.045,.355,1) .4s;transition:opacity .2s cubic-bezier(.645,.045,.355,1) .4s}.demo-animation__controls::before,.demo-animation__controls::after,.demo-animation__controls span,.demo-animation__controls div::before,.demo-animation__controls div::after{content:'';width:10px;height:10px;background:#fff;border:2px solid #6085f0}.demo-animation__controls::before{position:absolute;top:calc(50% - 5px);left:-6px}.demo-animation__controls::after{position:absolute;top:calc(50% - 5px);right:-6px}.demo-animation__controls div{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:calc(100% + 12px);top:-6px;left:-6px}.demo-animation__controls div:nth-child(2){top:auto;bottom:-6px}