.block__newsletter {
    padding: var(--padding-lg) 0;
    background-color: var(--orange);
    color: var(--white);
    text-align: center;
    position: relative;
}

.newsletter__body {
    background-color: var(--purple);
    padding: 4rem 3rem 22rem;
    clip-path: polygon(0 0, 97% 1%, 100% 100%, 2% 100%);
    position: relative;
}

    .newsletter__body h2 {
        margin-bottom: 2.5rem;
    }

        .newsletter__body h2 span {
            display: inline-block;
            padding: 1rem 1.5rem 0;
            margin: 0 0 .5rem;
            background-color: var(--green);
            clip-path: polygon(1% 8%, 100% 0, 97% 100%, 4% 100%);
            transform: rotate(-1deg);
        }

            .newsletter__body h2 span + br + span {
                transform: rotate(1deg);
            }

    .newsletter__body form {
        margin: 2.5rem 0 0;
        display: flex;
        position: relative;
        z-index: 1;
    }

    .newsletter__body .button--subscribe {
        width: 4.8rem;
        min-width: 4.8rem;
        height: 4.8rem;
        padding: 0;
        margin-left: .8rem;
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--green);
        clip-path: polygon(1% 0, 94% 4%, 100% 97%, 0% 100%);
    }

.block__newsletter img {
    position: absolute;
    right: 3rem;
    bottom: 0;
    z-index: 0;
}

@media(min-width: 992px) {
    .block__newsletter {
        padding: 12rem 0;
    }

    .block__socials + .block__newsletter {
        padding-top: 30rem;
    }

    .newsletter__body {
        background-color: transparent;
        clip-path: none;
        padding: 0 0 8rem;
        position: relative;
    }

        .newsletter__body:before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--purple);
            clip-path: polygon(0 0, 100% 0, 99% 100%, 2% 100%);
        }

        .newsletter__body .row > div {
            transform: translateY(-6rem);
            display: flex;
            flex-flow: column;
            align-items: center;
        }

        .newsletter__body h2 span {
            padding: 1.5rem 3.5rem 0;
            margin: 0;
        }

            .newsletter__body h2 span + span,
            .newsletter__body h2 span + br + span {
                margin-top: -2rem;
            }

            .newsletter__body p {
                font-size: 2rem;
                line-height: 3rem;
                max-width: 50rem;
            }

        .newsletter__body form {
            max-width: 40rem;
        }

    .block__newsletter img {
        width: auto;
        height: 100%;
        right: 4rem;
        bottom: 0;
    }
}

@media(min-width: 992px) and (max-width: 1199px) {
    .newsletter__body h2 {
        font-size: 10rem;
    }

    .block__newsletter img {
        height: 90%;
    }
}