/**
 * Block: Icon Callout
 *
 * An icon paired with a short, emphasised statement inside a rounded panel.
 * Breakpoint 850px matches the theme's `md` breakpoint and the point at which
 * `.alignwide` drops from 40px to 20px gutters.
 */

.em-icon-callout__inner {
	align-items: center;
	border-radius: 32px;
	display: flex;
	gap: 24px;
	padding: 30px 40px 30px 30px;
}

/*
 * Applied only when no palette color is chosen, so a chosen `has-*-background-color`
 * never has to out-specify this rule.
 */
.em-icon-callout__inner--default-bg {
	background-color: #e3f1fd;
}

.em-icon-callout__icon {
	flex: 0 0 auto;
	line-height: 0;
	width: 80px;
}

.em-icon-callout__icon svg,
.em-icon-callout__icon img {
	color: #00109f;
	display: block;
	height: auto;
	width: 100%;
}

.em-icon-callout__content,
.em-icon-callout__content p {
	color: #00109f;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
}

.em-icon-callout__content > :first-child {
	margin-top: 0;
}

.em-icon-callout__content > :last-child {
	margin-bottom: 0;
}

/* Keep the icon inline but tighten it up once the panel gets narrow. */
@media (max-width: 849px) {

	.em-icon-callout__inner {
		border-radius: 24px;
		gap: 16px;
		padding: 24px;
	}

	.em-icon-callout__icon {
		width: 64px;
	}
}