.signup-band {
    padding-block: var(--space-8);

    background: var(--color-gold);
    color: var(--color-ink);
}

.signup-band__layout {
    display: grid;
    grid-template-columns:
        minmax(18rem, 0.72fr)
        minmax(0, 1.28fr);

    align-items: center;

    gap: var(--space-8);
}

.signup-band__content {
    max-width: 34rem;
}

.signup-band__eyebrow {
    margin:
        0
        0
        var(--space-3);

    color: var(--color-ink);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.signup-band__heading {
    max-width: 14ch;

    margin: 0;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: var(--type-display-split);
    font-weight: var(--font-display-weight);
    line-height: 1.03;

    letter-spacing: var(--font-display-tracking-tight);
}

.signup-band__body {
    max-width: 31rem;

    margin:
        var(--space-4)
        0
        0;

    color: var(--color-ink-soft);

    line-height: 1.6;
}

.signup-band__form {
    min-width: 0;

    padding: var(--space-5);

    border-radius: var(--radius-sm);

    background: var(--color-cream);
    color: var(--color-ink);
}

.signup-band .form-field__input {
    background: var(--color-cream);
}

.signup-band .signup-form__note {
    color: var(--color-ink-soft);
}


/*
 * Tablet
 */

@media (max-width: 56rem) {
    .signup-band__layout {
        grid-template-columns: 1fr;

        gap: var(--space-7);
    }

    .signup-band__content {
        max-width: 38rem;
    }

    .signup-band__heading {
        max-width: 16ch;
    }
}


/*
 * Mobile
 */

@media (max-width: 40rem) {
    .signup-band {
        padding-block: var(--space-7);
    }

    .signup-band__heading {
        max-width: 14ch;
    }

    .signup-band__form {
        padding: var(--space-4);
    }
}