/*
    Two column form layout that collapses to a single column as necessary.
*/

form {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: 0.75em 0.5em;
}

label {
	grid-column: 1 / 2;
	text-align: right;
}

input, select, button, textarea {
	grid-column: 2 / 3;
}

button {
    width: 10em;
    margin-left: auto;
}

textarea {
	height: 4em;
	resize: vertical;
}

@media screen and (max-width: 600px) {
	form {
		grid-template-columns: 1fr;
		grid-gap: 0em;
	}

	label {
		text-align: left;
	}

	input, select, button, textarea {
		grid-column: 1 / 2;
		margin-bottom: 1em;
		width: 100%;
	}

	button {
        max-width: 10em;
        margin-left: auto;
	}

}