body {
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

main {
	background-color: var(--bg-bright);
	box-shadow: 0 10px 25px #0002;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	width: 100%;
	max-width: 600px;
	min-height: 400px;
}

main>* {
	flex-basis: 0;
	padding: 20px;
}

main .graphic {
	align-items: flex-start;
	flex-grow: 1;
	font-size: 2em;
	background-image: linear-gradient(40deg, #000, var(--color-primary)), url(../images/cover.jpg);
	background-blend-mode: multiply;
	background-size: cover;
	background-position: 40%;
}

main .graphic>img {
	filter: grayscale(1);
}

main .graphic>img:first-child {
	height: 2.3em;
	margin-bottom: .6em;
}

main .graphic>img:last-child {
	height: 1em;
}

main form {
	gap: 15px;
	flex-grow: 2;
}

main form h1 {
	font-size: 1.8em;
	text-transform: uppercase;
}

main form .btn {
	text-transform: uppercase;
}

@media (max-width:450px) {
	main {
		flex-direction: column;
	}
}