.Wave{
    position: relative;
    width: 100%;
}
.Wave1 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.Wave1 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 210px;
}

.Wave1 .shape-fill {
    fill: var(--content1);
}



.multiWave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.multiWave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 197px;
}

.multiWave .shape-fill {
    fill: var(--content3);
}

.Cut {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.Cut svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 200px;
}

.Cut .shape-fill {
    fill: var(--content1);
}


.skew {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.skew svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 135px;
}

.skew .shape-fill {
    fill: var(--footer);
}

.skewFooter{
    position: relative;
}

@media (max-width: 800px){
    .Wave1{
        width: 200%;
    }
    .multiWave{
        width: 270%;
    }
    .skewFooter{
        width: 250%;
    }
}