div#hello-signin { background-color: #efefff; padding: 20px 25px; margin: 0 0 22px 0; }
div#hello-password { background-color: #efefef; padding: 20px 25px; margin: 0; }

p#signin-intro, p#password-intro, p#signin-intro-error, p#password-intro-error { padding-bottom: 4px; }
p#signin-intro-error, p#password-intro-error { color: #f00; }

form p { margin: 10px 0; }
form input.d { background-color: #fff; border: 1px solid #333; padding: 4px 8px; }
form input.s { padding: 10px 0; background-color: #336; color: #fff; margin-top: 8px; }
form input.s:hover { background-color: #339; cursor: pointer; }
label { display: block; clear: both; float: left; padding: 4px 0; }

div#hello-signin h3, div#hello-password h3 { margin-top: 10px; }

@media screen and (min-width: 1050px) {
	div#hello-signin { float: left; width: 440px; }
	div#hello-password { float: right; width: 440px; }
	form.hello input.d { width: 300px; }
	form.hello input.s { margin-left: 268px; width: 150px; }
	label.hello { width: 100px; }
	form.change input.d { width: 400px; }
	form.change input.s { margin-left: 468px; width: 150px; }
	label.change { width: 200px; }
}

@media screen and (max-width: 1050px) {
	div#hello-signin { float: none; }
	div#hello-password { float: none; }
	form.hello input.d { width: 295px; }
	form.hello input.s { width: 150px; }
	form.change input.d { width: 400px; }
	form.change input.s { width: 150px; }
	label { float: none; }
}








/*

div#hello { 
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6.rem;
	margin-bottom: 1.6rem;
}
	
div#hello-signin { 
	background-color: #efefff; 
	padding: 1.6rem;
}

div#hello-password { 
	background-color: #efefef; 
	padding: 1.6rem;
}

h3 {
	margin: 0;
}

p#signin-intro-error, p#password-intro-error { 
	color: #f00; 
}

*/