.newsletter__wrapper {
    border-radius: 2.4rem;
    background-color: var(--pink);
    padding: 4rem;
}

.newsletter__clip {
    background-color: var(--purple);
    -webkit-clip-path: url(#horizontal1);
    clip-path: url(#horizontal1);
    aspect-ratio: 1216 / 579;
    display: flex;
    justify-content: center;
}

.newsletter__content {
    width: 60%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
}

    .newsletter__content .form {
        width: 100%;
        flex-flow: row;
        justify-content: center;
        margin-bottom: 4.8rem;
    }

        .newsletter__content .form .form__input {
            min-width: 25rem;
            background-color: transparent;
            border: .2rem solid var(--white);
            color: var(--white);
        }

            .newsletter__content .form .form__input:focus-visible {
                outline-color: var(--black);
            }

        .newsletter__content .form .form__group > label {
            color: var(--white);
        }

    .newsletter__content .socials {
        display: flex;
        gap: 2.4rem;
    }

        .newsletter__content .socials a {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: none;
        }

@media (pointer: fine) {
    .newsletter__content .socials a:hover {
        transform: scale(1.15);
    }
}

@media(max-width: 1023px) {
    .newsletter__wrapper {
        padding: 2rem;
    }

    .newsletter__clip {
        aspect-ratio: unset;
        padding: 6rem 0;
    }

    .newsletter__content .form {
        margin-bottom: 2.4rem;
    }
}

@media(max-width: 767px) {
    .newsletter__clip {
        -webkit-clip-path: url(#vertical3);
        clip-path: url(#vertical3);
        padding: 0;
        aspect-ratio: 335 / 515;
    }

    .newsletter__content {
        width: calc(100% - 8.8rem);
    }

        .newsletter__content > p {
            display: none;
        }

        .newsletter__content .form {
            flex-flow: column;
            margin-bottom: 4.8rem;
        }

            .newsletter__content .form .form__input {
                min-width: unset;
            }
}
