.c-newsletter {
    background: $wild-sand;
    margin: 40px 0;
    text-align: center;

    @include at-medium-size {
        margin: 60px 0;
    }
}

.c-newsletter-wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 560px;
    padding: 0 $MOBILE_SIDE_GUTTER;
}

.c-newsletter__logo {
    display: none;
    width: 60px;

    @include at-medium-size {
        display: block;
        margin: 0 auto 10px;
    }

}

.c-newsletter__title {
    @include font('STARLING', 24px, 'NORMAL', 26px);
    color: $black;
    letter-spacing: -0.3px;
    margin: 0 0 10px 0;
    text-transform: uppercase;

    @include at-medium-size {
        @include font-size(37px);
        @include line-height(38px);
    }
}

.c-newsletter__description {
    @include font('STARLING', 15px, 'MEDIUM', 18px);
    color: $black;
    font-style: italic;
    letter-spacing: -0.3px;
    margin: 10px 0 20px 0;

    @include at-medium-size {
        @include font-size(16px);
        margin-bottom: 30px;
    }
}

.c-newsletter__form {
    display: block;
    margin: 20px 0 10px 0;

    @include at-medium-size {
        height: 40px;
        margin: 30px 0 20px 0;
    }
}

.c-newsletter__form-text {
    @include font('COMMUTER SANS', 14px);
    appearance: none;
    background: $white;
    color: $boulder;
    margin: 0 0 10px 0;
    text-align: center;

    @include at-medium-size {
        height: 40px;
        text-align: left;
        width: calc(100% - 10px - 130px);
    }
}

.c-newsletter__form-btn {
    @include button-single();
    @include button-single-light();
    width: 100%;
    text-transform: uppercase;

    &:focus,
    &:hover {
        @include button-single-light-hover();
    }

    @include at-medium-size {
        margin-left: 10px;
        width: 130px;
    }
}

.c-newsletter__legal {
    @include font('COMMUTER SANS', 10px);
    clear: both;
    color: $black;
    margin: 20px 0 0 0;

    a {
        color: inherit;
        text-decoration: underline;
    }
}