/*
.field {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}
*/
    /* this will need to be copied into index.css to use as a snippet */
form {
    display: grid;
}    
.margin-1 {
    grid-column: span 12;
    padding-bottom: 1.5rem;
}
.field label {
    display: block;
    margin-bottom: .5rem
}
.field input {
    width: 100%;
    font: inherit;
    background: light-dark(rgba(0,0,0, .05), rgba(255,255,255, .05));
	border: 1px solid light-dark(rgba(0,0,0, .25), rgba(255,255,255, .25));
	padding: .5rem;
	border-radius: 0.25rem;
	outline-offset: -1px;
}
.textarea {
    height: 10rem;
    width: 100%;
    font: inherit;
    vertical-align: top; 
    background: light-dark(rgba(0,0,0, .05), rgba(255,255,255, .05));
	border: 1px solid light-dark(rgba(0,0,0, .25), rgba(255,255,255, .25));
	padding: .5rem;
	border-radius: 0.25rem;
	outline-offset: -1px;
}
::placeholder {
    opacity: 0.4;
}