form.mform { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5%; row-gap: 0.5em; margin-top: 10px; }
form.mform > * { grid-column: 1 / -1; }
form.mform > .form-field.half { grid-column: auto; }
form.mform > .form-field:has([data-grav-field="cap"]) { display: none; }
form.mform .form-label label { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
form.mform .required { margin-right: 0.4em; color: var(--accent); font-family: "Bungee", sans-serif; letter-spacing: normal; }
form.mform .form-data { position: relative; }
form.mform input[type="text"], form.mform input[type="tel"], form.mform input[type="email"], form.mform textarea { width: 100%; border: medium none; padding: 10px 5px; background: var(--field); border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset; }
form.mform textarea { height: 13em; }
form.mform input:focus, form.mform textarea:focus { background: var(--field-focus); }
form.mform input:focus-visible, form.mform textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 0; }
form.mform :is(input, textarea):user-invalid { background-color: var(--field-invalid); }
form.mform .buttons { margin-top: 10px; }
form.mform .button[type="submit"] { margin: 0 3px 13px 0; padding: 9px 26px; border: 2px solid var(--text); border-radius: 0; background: var(--bg); color: var(--text); box-shadow: 3px 3px 0 var(--text); vertical-align: middle; transition: transform .1s cubic-bezier(.4, 0, .2, 1), box-shadow .1s cubic-bezier(.4, 0, .2, 1); }
form.mform .button[type="submit"]:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--text); }
form.mform .button[type="submit"]:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--text); }
form.mform .button[type="submit"]:disabled { opacity: .5; cursor: default; transform: none; box-shadow: 3px 3px 0 var(--text); }
@media (prefers-reduced-motion: reduce) { form.mform .button[type="submit"] { transition: none; } }
form.mform .has-errors input, form.mform .has-errors textarea { background-color: var(--field-invalid); }
form.mform .form-errors { position: absolute; top: 50%; left: 8px; translate: 0 -50%; z-index: 1; color: var(--accent); pointer-events: none; }
form.mform .form-errors p { margin: 0; }
form.mform .has-errors textarea ~ .form-errors, form.mform [data-grav-field="textarea"] .form-errors { top: 7px; translate: none; }
.form-wrapper { display: flex; flex-direction: column; }
.notices { order: 1; margin: 10px 0 0; padding: 12px 16px; border: 1px solid var(--notice-line); border-radius: 3px; background: var(--notice-bg); }
.notices:focus { outline: none; }
.notices p { margin: 0; }
.notices.red, .notices.error { border-color: var(--error-line); background: var(--error-bg); color: var(--accent); }

@media (width < 768px) {
	form.mform { grid-template-columns: 1fr; }
}