body {
  margin: 0;
}

.wrap {
  overflow: hidden;
  position: relative;
  height: 40vh;
  background-image: linear-gradient(
    -206deg,
    var(--tpl-color-main-a) 0%,
    var(--tpl-color-main-b) 100%
  );
  border-radius: 0 0 50% 50%;
  top: -10px;
  width: 120vw;
  left: -200px;
  min-height: 450px;
  max-height: 450px;
}
canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

@media (max-width: 1199.98px) {
  .wrap {
    top: -16px;
  }
}

@media (max-width: 991.98px) {
  .wrap {
    height: 50vh;
    width: 133vw;
  }
}

@media (max-width: 767.98px) {
  .wrap {
    height: 60vh;
    width: 150vw;
  }
}

@media (max-width: 575.98px) {
  .wrap {
    height: 65vh;
    width: 200vw;
  }
}