.ls-container .mask {
    -webkit-mask-image: url(../images/wave.svg);
    mask-image: url(../images/wave.svg);
    mask-mode: alpha;
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    webkit-mask-image: url(../images/wave.svg);
    webkit-mask-mode: alpha;
    webkit-mask-position: top;
    webkit-mask-repeat: no-repeat;
}

.ls-container .mask.mask--background {

    /* background masks are 100% because they might be larger than the viewport */
    -webkit-mask-size: 100vw;
    mask-size: 100vw;
    webkit-mask-size: 100vw;
    -webkit-mask-position: top center;
    mask-position: top center;
    webkit-mask-position: top center;
}

.ls-container .mask.mask--element {
    /* element masks are 100vw to be scaled similarly to the background */
    -webkit-mask-size: 100vw;
    mask-size: 100vw;
    webkit-mask-size: 100vw;
}