.newsletter {
    background-color: var(--noninteractive-background-brand);
    padding: var(--spacing-8xl) 0;
}

.newsletter .content {
    grid-column: span 8;
}


.newsletter .content p {
    margin-top: var(--spacing-xl);
}

.newsletter .newsletter-input {
    grid-column: span 4;
}

.newsletter button {
    grid-column: span 2;
    margin-top: var(--spacing-2xl);
}

@media (max-width: 1024px) {

    .newsletter .content {
        grid-column: 1 / -1;
    }

    .newsletter .newsletter-input {
        grid-column: span 5;
    }

    .newsletter .newsletter-input {
        margin-top: var(--spacing-5xl);
    }
}

@media (max-width: 767px) {
    .newsletter {
        padding: var(--spacing-4xl) 0;
    }

    .newsletter button {
        grid-column: 1 / -1;
        margin-top: var(--spacing-4xl);
    }
}