@layer components {

    .newsletter {
        padding: var(--s-10) var(--gutter) 0;
    }

    .newsletter__inner {
        display: grid;
        justify-items: center;
        gap: var(--s-3);
        max-width: 640px;
        margin-inline: auto;
        text-align: center;
    }

    .newsletter__title {
        font-size: var(--t-2xl);
    }

    .newsletter__text {
        max-width: 44ch;
        color: var(--c-muted);
    }

    .newsletter__note {
        max-width: 52ch;
        margin-top: var(--s-2);
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .newsletter .news-form {
        width: 100%;
        text-align: left;
    }

}