@layer components {
    section.welcome-form {
        text-align: center;

        h1 {
            text-align: center;
            font-family: var(--font--title--family--xlarge);
            font-size: var(--font--title--size--xlarge);
            font-weight: var(--font--title--weight--xlarge);
            line-height: var(--font--title--line-height--xlarge);
            letter-spacing: var(--font--title--letter-spacing--xlarge);
            text-transform: var(--font--title--casing--xlarge);
            font-size: clamp(3rem, 15vw, 5.5rem);
            margin-bottom: var(--space-l);
        }

        div.form-field {
            text-align: left;
        }

        > p {
            font-family: var(--font--text--family--large);
            font-size: var(--font--text--size--large);
            font-weight: var(--font--text--weight--large);
            line-height: var(--font--text--line-height--large);
            letter-spacing: var(--font--text--letter-spacing--large);
            text-transform: var(--font--text--casing--large);
            font-family: var(--font--family--sans-serif);

            &.highlight {
                background-color: var(--color--brand--highlight);
                padding: var(--space-2xs) var(--space-m);
                font-family: var(--font--title--family--small);
                font-size: var(--font--title--size--small);
                font-weight: var(--font--title--weight--small);
                line-height: var(--font--title--line-height--small);
                letter-spacing: var(--font--title--letter-spacing--small);
                text-transform: var(--font--title--casing--small);
            }

            &.error {
                font-family: var(--font--title--family--small);
                font-size: var(--font--title--size--small);
                font-weight: var(--font--title--weight--small);
                line-height: var(--font--title--line-height--small);
                letter-spacing: var(--font--title--letter-spacing--small);
                text-transform: var(--font--title--casing--small);
            }
        }

        div.form-field {
            p.error {
                text-align: left;
            }

            &.handle {
                grid-template-areas:
                    "label label     "
                    "input decoration"
                    "note  note      ";
                align-items: center;
                grid-template-columns: 1fr auto;
                column-gap: var(--space-2xs);

                > span {
                    grid-area: decoration;
                    font-family: var(--font--title--family--small);
                    font-size: var(--font--title--size--small);
                    font-weight: var(--font--title--weight--small);
                    line-height: var(--font--title--line-height--small);
                    letter-spacing: var(--font--title--letter-spacing--small);
                    text-transform: var(--font--title--casing--small);
                }
            }
        }
    }

    @media screen and (min-width: 600px) {
        section.welcome-form {
            form > div.sign-up-form {
                display: flex;
                flex-direction: column;

                /* max-width: 400px; */
                button {
                    max-width: 5rem;
                }
            }
        }
    }
}