.demo-animation{--gridPadding:16px;--gridGutter:10px;--gutterAmountHorizontal:6;--gutterAmountVertical:13;padding:var(--gridPadding);margin:16px 0;position:relative;overflow:hidden}@media (width>=768px){.demo-animation{--gridPadding:30px;--gridGutter:6px;--gutterAmountHorizontal:24;--gutterAmountVertical:26;margin:0}}@media (width>=1024px){.demo-animation{--gridGutter:12px}}.demo-animation__grid{background:#f1f1f1;width:100%;padding-top:224%;display:flex;position:relative}@media (width>=768px){.demo-animation__grid{padding-top:101.1%}}.demo-animation__rows,.demo-animation__cols{flex-direction:column;justify-content:space-evenly;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.demo-animation__rows span,.demo-animation__cols span{width:100%;height:var(--gridGutter);background:var(--color-white)}@media (width<=767px){.demo-animation__rows span:nth-child(n+13),.demo-animation__cols span:nth-child(n+13){display:none}}.demo-animation__cols{flex-direction:row}.demo-animation__cols span{width:var(--gridGutter);height:100%}@media (width<=767px){.demo-animation__cols span:nth-child(n+6){display:none}}.demo-animation__elements{width:calc(100% - (var(--gridPadding)*2));height:calc(100% - (var(--gridPadding)*2));top:var(--gridPadding);left:var(--gridPadding);position:absolute}.demo-animation__images,.demo-animation__copy{width:100%;height:100%;position:absolute;top:0;left:0}.demo-animation__image{--imageDelay:0s;--borderRadius:8px;--imagePadding:3%;z-index:2;border:2px solid #0000;position:absolute}.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 (width<=767px){.demo-animation__image:nth-child(n+5){display:none}}body:not(.has-reduced-motion) .demo-animation__image .demo-animation__controls{transition-delay:calc(var(--imageDelay) + .4s)}body:not(.has-reduced-motion) .demo-animation__image img{transition:opacity .2s cubic-bezier(.645,.045,.355,1);transition-delay:var(--imageDelay)}.demo-animation__image:first-child{--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:first-child{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:first-child[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 (width>=768px){.demo-animation__image:first-child{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:first-child[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:.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){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 (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:.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){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 (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:.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){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 (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:.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){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){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%;z-index:2;border:2px solid #0000;height:8.4%;position:absolute}.demo-animation__text[data-has-intersected=true] svg{opacity:1}body:not(.has-reduced-motion) .demo-animation__text svg{transition:opacity .2s cubic-bezier(.645,.045,.355,1)var(--imageDelay)}.demo-animation__text:first-child{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 (width>=768px){.demo-animation__text:first-child{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:.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 (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:.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 (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:.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 (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:.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 (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 (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{object-fit:cover;opacity:0;border-radius:var(--borderRadius);width:100%;height:100%}.demo-animation__image-wrapper svg{opacity:0;width:auto;height:100%}.demo-animation__controls{opacity:0;width:100%;height:100%;transition:opacity .2s cubic-bezier(.645,.045,.355,1) .4s;position:absolute;top:0;left:0}.demo-animation__controls:before,.demo-animation__controls:after,.demo-animation__controls span,.demo-animation__controls div:before,.demo-animation__controls div:after{content:"";background:var(--color-white);border:2px solid #6085f0;width:10px;height:10px}.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{justify-content:space-between;width:calc(100% + 12px);display:flex;position:absolute;top:-6px;left:-6px}.demo-animation__controls div:nth-child(2){top:auto;bottom:-6px}