.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 var(--slate-300);
            font-size: .8em;
            border-radius: .2rem;
            transition-property: box-shadow;
            transition-duration: .2s;
            transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);

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

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