body {
	margin: 0 auto;
	padding: 2em 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1 {
	font-size: 1.5rem;
	margin: 0;
}

h2 {
	font-size: 1.25rem;
	margin: 2rem 0 0 0;
}

.grid {
	margin-top: 1em;
	display: grid;
	gap: 0.5em;
}

.input-grid {
	grid-template-columns: 1fr 2fr 2fr;
}

.grid-header {
	padding: var(--padding);
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.grid-header:first-child {
	padding: var(--vertical-padding) 0;
}

.line {
	grid-column: 1 / 4;
	height: 0.0625em;
	background-color: var(--middleground-color);
}

label {
	padding: var(--vertical-padding) 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

input {
	width: 100%;
}

.vertical-middle {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.button-grid {
	grid-template-columns: auto auto auto;
}

button {
	justify-self: center;
}

.group {
	margin-top: 1em;
}

.group input,
.group select {
	flex-basis: 6em;
	flex-grow: 1;
}

@media (min-width: 576px) {
	.input-grid {
		grid-template-columns: auto auto auto;
	}

	input, textarea, select {
		width: 12em;
	}
}