.mosaic-icon-box {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}

/* "start" and "end" follow the page direction: the icon is on the reading side in Arabic too. */
.mosaic-icon-box--start {
	flex-direction: row;
	align-items: flex-start;
}

.mosaic-icon-box--end {
	flex-direction: row-reverse;
	align-items: flex-start;
}

.mosaic-icon-box__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--mosaic-color-primary, #2b4acb);
}

.mosaic-icon-box--top > .mosaic-icon-box__icon {
	align-self: var(--mosaic-self, flex-start);
}

.mosaic-icon-box__icon--circle,
.mosaic-icon-box__icon--rounded,
.mosaic-icon-box__icon--square {
	padding: 0.5em;
	background-color: var(--mosaic-color-surface, #f5f6fa);
}

.mosaic-icon-box__icon--circle {
	border-radius: 50%;
}

.mosaic-icon-box__icon--rounded {
	border-radius: 0.3em;
}

.mosaic-icon-box__body {
	flex: 1;
	min-inline-size: 0;
}

.mosaic-icon-box__title {
	margin: 0 0 0.35em;
	color: var(--mosaic-color-headings, inherit);
	line-height: 1.3;
}

.mosaic-icon-box__title a {
	color: inherit;
	text-decoration: none;
}

.mosaic-icon-box__title a:hover {
	text-decoration: underline;
}

.mosaic-icon-box__title a:focus-visible {
	outline: var(--mosaic-focus-width, 3px) solid var(--mosaic-color-focus, currentColor);
	outline-offset: 2px;
}

.mosaic-icon-box__text {
	margin: 0;
	overflow-wrap: break-word;
}

/* Whole-box link: the title's link stretches over the box. */
.is-whole-link .mosaic-icon-box__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}