:root {
  --width: min(100vw, 84rem);
  --full-width: 100vw;

  --angle: -4deg;
  --reverse-angle: calc(var(--angle) * -1);

  /* Make sure we always have the absolute value */
  /* negative values don't work with CSS tan() */
  --abs-angle: max(var(--angle), var(--angle) * -1);
  --tan-alpha: tan(var(--abs-angle));
  --skew-padding: calc(var(--width) * var(--tan-alpha) / 2);
  --clip-padding: calc(var(--full-width) * var(--tan-alpha) / 2);
}

.diagonal-box,
.diagonal-box-alt {
  position: relative;
  padding: var(--skew-padding) 0;
  margin-top: -1px;

  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewy(var(--angle));
    transform-origin: 50% 0;
    outline: 1px solid transparent;
    backface-visibility: hidden;
  }
}
.diagonal-box-alt {
  --angle: -4deg;
}

.diagonal-content {
  transform: skewy(var(--angle));
}

.flat-box {
  position: relative;

  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    outline: 1px solid transparent;
    backface-visibility: hidden;
  }
}
.flat-box.top {
  padding: 2em 0 10em 0;
  margin-bottom: -6em;
}
.flat-box.bottom {
  padding: 10em 0 2em 0;
  margin-top: -6em;
}

.bg-bla:before {
  background-image: linear-gradient(0deg, #151515, #000);
}
.bg-dar:before {
  background-image: linear-gradient(0deg, #2e2e2e, #1f1f1f);
}

.bg-one:before {
  background-image: linear-gradient(45deg, #450c4b, #831462);
}

.bg-two:before {
  background-image: linear-gradient(45deg, rgb(21, 70, 71), rgb(0, 167, 144));
}

.bg-three:before {
  background-image: linear-gradient(45deg, rgb(0, 119, 26), rgb(7, 156, 7));
}

.content {
  max-width: var(--width);
  margin: 0 auto;
  padding: 1.5em;
  position: relative;

  /* border: 2px dashed #fff8;*/
}