form#brand-selection {
	width: 100%;
}

ul.brand-options {
	display: grid;
	gap:15px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	list-style: none;
	margin-left: 0;
	margin-bottom: 1em;
	padding-left: 0;
	margin-top: 0;
}

.brand-options li {
	border: 1px solid #ddd;
	border-top:4px solid #333;
	border-radius: 1px;
	display: block;
	margin-bottom: 0;
	position: relative;
	padding: 20px;
	text-align: center;
}

.brand-options li:hover {
	border-color: #333;
	box-shadow: 0 3px 9px #16202d33;
}

.brand-options *:hover {
	cursor: pointer;
}

.brand-options li:has(input:checked) {
	background: #f4f5ff;
	border-color: #004fcd;
	box-shadow: 0 3px 9px #16202d33;
	color: #333;
}

.brand-options li:has(input:checked) label {
	color: #333;
}

.brand-options li:has(input:disabled) {
	opacity: .5;
}

.brand-options input {
	bottom: 0;
	display: block;
	opacity: .011;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}

.brand-options span {
	font-size: 1.25em;
	font-weight: 400;
	position: absolute;
	left: 16px;
	top: 16px;
}

.brand-options label {
	cursor: pointer;
	color: #243647;
	font-family: Guardian TextSans Web, "Helvetica Neue Light","Helvetica Neue","HelveticaNeue",Helvetica,Arial,"Lucida Grande",sans-serif;
	font-size: 1em;
	border-radius: 1px;
	display: inline-block;
	width: 100%;
}


.cta-button {
	background: #004fcd;
	border-radius: 5px;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 1em;
	opacity: 1;
	padding: 14px 20px;
	transition: background .25s ease-in-out,transform .15s ease;
	text-align: center;
	width: 100%;
}

.cta-button:hover {
	background: #16202d;
}


body {
	font-family: Guardian TextSans Web, "Helvetica Neue Light", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 1em;
	line-height: 1.45;
	margin: 0;
	padding: 0;
}

#header {background: #333;height:30px;margin-bottom:1em;}

h1 {font-size:1.5em;margin-bottom:1em;}
p {margin:0 0 1em 0;}

.page-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	margin: auto;
	max-width: 600px;
	padding:0 5%;
}

.page-content.narrow {
	align-items: flex-start;
	max-width: 600px;
}


ul.brand-options li img {height:30px;width:auto;max-width:100%;}

#footer {display: flex;flex-direction:column;align-items: center;font-size:.6em;margin-top:4em;text-align: center;}

#footer ul {display: flex;flex-direction:column;justify-content:space-between;list-style-type: none;margin:0;padding:0;width:100%;max-width:400px;}

#footer a {color:#004fcd;}
#footer a:hover {color:#333;}

form#email {
	display: flex;
	flex-direction:column;
	width: 100%;
}

#email input[type="text"],
#email input[type="email"] {
	font-size: 1.25em;
	margin-bottom:1em;
	padding: 3%;
}

.error {font-weight:600;}
.error span {color:#A9141E;}


@media screen and (min-width: 480px) {
.page-content {padding:0 3%;}

form#email {
	flex-direction:row;
	justify-content:space-between;
}

#email input[type="text"],
#email input[type="email"] {
	padding: 2%;
	width:67%;
	margin-bottom:0;
}
#email .cta-button {
	width: fit-content;
	width:27%;
}


#footer ul {flex-direction:row;}
}

@media screen and (min-width: 1024px) {

.page-content {max-width: 720px;}