<section>
  <div>Section 1</div>
</section>
<section>
  <div>Section 2</div>
</section>

:root {
  --value: 15deg;
}

@media screen and (min-width: 1100px) {
  :root {
    --value: 5deg;
  }
}
body {
  background-color: #011627;
  color: #D2DEE7;
  font-family: Helvetica;
  font-size: 2em;
}
section {
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section {
  transform: skewY(var(--value));
  
}

section * {
  transform: skewY(calc(-1* var(--value)))
}
section:nth-child(1) {
  background-color: rgba(255,255,255, .2);
}

section:nth-child(2) {
  background-color: rgba(255,255,255,.3);
}