.WaveFooter {
    margin-top: 3rem;
    min-height: 300px;
    position: relative;
    .waves {
        >use {
            fill: var(--xshop-primary);
            animation: move-forever  var(--speed) -2s linear infinite;
            &:nth-child(2) {
                animation-delay: -3s;
                animation-duration: var(--speed2);
            }
            &:nth-child(3) {
                animation-delay: -4s;
                animation-duration: var(--speed3);
            }
        }
    }
    svg {
        position: absolute;
        left: 0;
        bottom: 5rem;
        width: 100%;
        height: 30vw;
        max-height: 200px;
    }

    .content{
        padding: 1rem;
        background: var(--xshop-primary);
        opacity: .96;
        color: var(--xshop-diff);
        height: 5rem;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
    }

}

@keyframes move-forever {
    0% {
        transform: translate(-90px, 0%);
    }
    100% {
        transform: translate(85px, 0%);
    }
}