*,
*::before,
*::after {
    box-sizing: border-box;
}

html { height: 100%; background: #f5f2e8 }
body { min-height: 100%; height: unset; background: unset }

main {
	max-width: 1000px;
	margin: 0 auto;
	padding: 1em;
	background: white;
	border: 1px solid #ddd;
}

section.hero > img {
	width: 0;
	min-width: 100%;
	height: min(386px, 55vw);
	object-fit: cover;
	object-position: left;
}


.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

form {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1em;
	bborder: 1px inset #aaa;
	padding: 1em;
	margin-top: 1em;
	border-radius: 3px;
}

.form-field {
	grid-column: 1 / -1;
	display: grid;
	gap: 1em;
	grid-template-columns: auto 1fr;
	grid-template-columns: subgrid;
}

.form-field > input {
	justify-self: start;
}


.infobox {
	background: yellow; 
	padding: 1em; 
	border: 1px outset rgba(0 0 0 / 0.5);
}

dt { font-weight: bold }
dt::after { content: ":" }
dd { margin: 0 }