/* -48px because visual bug in Chrome, doesn't make sense */

.shape-divider {
    height: 50px;
    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);

    &.compensate-0 {
        margin-top: -48px;
    }

    &.compensate-4 {
        margin-top: calc(-48px - 1rem);
    }

    &.compensate-8 {
        margin-top: calc(-48px - 2rem);
    }

    &.compensate-16 {
        margin-top: calc(-48px - 4rem);
    }

    &.compensate-32 {
        margin-top: calc(-48px - 8rem);
    }
}