/* Keep the wordmark compact while displaying the supplied OA image on its right. */
.oa-new-brand {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(7px, 1vw, 11px);
	max-width: 100%;
	white-space: nowrap;
}

.oa-new-brand > span {
	order: 1;
	min-width: 0;
	align-self: center;
	text-align: left !important;
	line-height: 1.05 !important;
}

.oa-new-brand > b {
	order: 2;
	display: block !important;
	flex: 0 0 auto !important;
	width: clamp(56px, 5.4vw, 72px) !important;
	aspect-ratio: 16 / 9;
	height: clamp(32px, 3.04vw, 41px) !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	background-color: transparent !important;
	background-image: url("oa-logo-256.png") !important;
	background-image: -webkit-image-set(
		url("oa-logo-256.png") 1x,
		url("oa-logo-512.png") 2x
	) !important;
	background-image: image-set(
		url("oa-logo-256.png") 1x,
		url("oa-logo-512.png") 2x
	) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
}

@media (max-width: 720px) {
	.oa-new-brand {
		gap: 7px;
	}

	.oa-new-brand > b {
		width: 54px !important;
		height: 31px !important;
	}
}

@media (max-width: 420px) {
	.oa-new-brand {
		gap: 6px;
	}

	.oa-new-brand > b {
		width: 46px !important;
		height: 27px !important;
	}
}