.awning {
    width: 100%;
    height: 20vh;
    display: flex;
    margin-top: 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    position: relative;
    background-color: #5b291c;
    padding-bottom: 20px;
}

.stripe {
    width: 10%;
    height: 20vh;
    background-color: #FEF9F2;
    border: 1px solid black;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.stripe:nth-child(odd) {
    background-color: #5b291c;
}

.draw-wave {
    width: 100%;
    height: 15vh;
    display: flex;
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
}

.waves {
    position: absolute;
    bottom: 10vh;
    width: 100%;
    height: 10vh;
    display: flex;
    z-index: 1;
}

.wave {
    width: 20vh;
    height: 20vh;
    background-color: #5b291c;
    border-radius: 50%;
    margin: 0 -2vh;
    position: relative;
    top: -5vh;
    clip-path: ellipse(50% 50% at 50% 50%);
}

@media (max-width: 768px) {
    .awning {
        height: 10vh;
    }

    .stripe {
        height: 10vh;
    }

    .draw-wave {
        height: 7.5vh;
    }

    .waves {
        bottom: 5vh;
        height: 5vh;
    }

    .wave {
        width: 10vh;
        height: 10vh;
        top: -2.5vh;
    }
}