.form-group {
    label {
        display: block;
        margin-bottom: .35rem;
        font-size: .9em;
        font-weight: 600;
    }

    .form-input {
        input[type=text],
        input[type=tel],
        input[type=email],
        textarea {
            display: block;
            width: 100%;
            padding: .4rem .5rem;
            border: 1px solid color-mix(in srgb, var(--foreground) 30%, var(--background));
            font-size: .8em;
            border-radius: var(--border-radius);
            transition-property: box-shadow;
            transition-duration: .2s;
            transition-timing-function: var(--timing-function);

            &:focus-visible {
                box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent);
            }
        }
    }

    .form-error {
        margin-top: .3em;
        font-size: .75em;
        color: var(--red-500);
    }
}