html5 + css3 фоновая проблема на адаптивном сайте

Question

Я работаю над веб-сайтом, и у меня есть многоцветный фон, созданный с использованием css3, и jumbotron, сделанный с использованием css3 и bootstrap, под которым я дал стиль, который не могу объяснить в письменной форме ( код ниже). когда на экранах среднего размера и выше проблема исчезает, но на экранах малого размера она появляется. Стиль, о котором я говорю, сделан с использованием круга цвета A над квадратом цвета B, чтобы он выглядел как jumbotron прямо под ним (с фоновым цветом B), расширяется вверх (он в значительной степени похож на радиус границы: 40; но перевернутый). Когда на больших устройствах, круг мешает фону элемента выше, заставляя все это выглядеть непривлекательным. Я не знаю, как это исправить, есть идеи? Изображение прикреплено, потому что я не знаю, будет ли проблема видна во фрагменте.

.wrapper {
  background: #2c2c38;
  color: white;
}
.bg-main {
  color: #fff;
  background: -webkit-linear-gradient(110deg, #1f1f26 40%, rgba(0, 0, 0, 0) 30%), -webkit-radial-gradient(farthest-corner at 0% 0%, #121317 70%, #2c2c38 70%);
  background: -o-linear-gradient(110deg, #1f1f26 40%, rgba(0, 0, 0, 0) 30%), -o-radial-gradient(farthest-corner at 0% 0%, #121317 70%, #2c2c38 70%);
  background: -moz-linear-gradient(110deg, #1f1f26 40%, rgba(0, 0, 0, 0) 30%), -moz-radial-gradient(farthest-corner at 0% 0%, #121317 70%, #2c2c38 70%);
  background: linear-gradient(110deg, #1f1f26 40%, rgba(0, 0, 0, 0) 30%), radial-gradient(farthest-corner at 0% 0%, #121317 70%, #2c2c38 70%);
}
.carousel {
  
}
.jumbotron {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121317;
  transform: skewY(2deg);
  color: white;
}
.jumbotron:before {
  content: "";
  width: 40px;
  height: 40px;
  background: #121317;
  position: absolute;
  top: -39px;
  left: 0;
  z-index: -2;
}
.jumbotron:after {
  content: "";
  width: 80px;
  height: 80px;
  background: #1f1f26;
  top: -80px;
  position: absolute;
  left: 0;
  border-radius: 50%;
  z-index: -1px;
}
.jumbotron-btm-right:before {
  content: "";
  width: 40px;
  height: 40px;
  background: #121317;
  position: absolute;
  bottom: -24px;
  right: 0;
  z-index: -2;
}

.jumbotron-btm-right:after {
  content: "";
  width: 80px;
  height: 80px;
  background: #2c2c38;
  bottom: -80px;
  position: absolute;
  right: 0;
  border-radius: 50%;
  z-index: -1px;
}

<div class="wrapper">
<div class="carousel bg-main">
  <br />
  <br />
  <br />
  <br />
  <p>THIS IS WHERE THE CAROUSEL IS</p>
  <br />
  <br />
  <br />
  <br />
</div>
<div class="jumbotron">
<div class="jumbotron-btm-right">
  <br />
  <br />
  <p>THIS IS THE JUMBOTRON</p>
  <br />
  <br />
  </div>
</div>
<br />
<br />
<br />
<p>THIS IS THE REST OF THE PAGE</p>
<br />
<br />
<br />
</div>