:root {
  --sdc-slope-max-width: 1440px;
  --sdc-slope-background-color: #fff;
  --sdc-slope-angle: 3deg;
  --sdc-slope-block-height: 0; /*  calc(((min(100vw, var(--sdc-slope-max-width)) / 16) * 9) / 2 ); */
}

.sdc-slope-wrapper {
  position: relative;
}


.sdc-slope {
  display: block;
  position: absolute;
  width: 100%;
  background-color: var(--sdc-slope-background-color);
  height: var(--sdc-slope-block-height);
}

.sdc-slope.top-left, .sdc-slope.top-right {
  margin-top: calc(tan(var(--sdc-slope-angle)) * min(100vw, var(--sdc-slope-max-width)) * -1);
}

.sdc-slope.bottom-left, .sdc-slope.bottom-right {
  margin-bottom: calc(tan(var(--sdc-slope-angle)) * min(100vw, var(--sdc-slope-max-width)));
}

.sdc-slope.top-left:before, .sdc-slope.top-right:before {
  position: absolute;
  display: block;
  top: 1px;
  left: 0;
  content: '';
  width: 100%;
  height: calc(tan(var(--sdc-slope-angle)) * min(100vw, var(--sdc-slope-max-width)));
  background-color: var(--sdc-slope-background-color);
}

.sdc-slope.bottom-left:after, .sdc-slope.bottom-right:after {
  position: absolute;
  display: block;
  bottom: calc((tan(var(--sdc-slope-angle)) * min(100vw, var(--sdc-slope-max-width)) * -1) + 1px);
  left: 0;
  content: '';
  width: 100%;
  height: calc(tan(var(--sdc-slope-angle)) * min(100vw, var(--sdc-slope-max-width)));
  background-color: var(--sdc-slope-background-color);
}

.sdc-slope.top-left:before {
  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
}

.sdc-slope.top-right:before {
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.sdc-slope.bottom-left:after {
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);

}

.sdc-slope.bottom-right:after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);

}