.icon-text {
	/* Same breakout as the story slider: wider than the article column, clear of the 200px TOC. */
	--icon-text-width: max(100%, min(1160px, 100vw - 448px));

	container-type: inline-size;
	width: var(--icon-text-width);
	margin-block: 60px;
	margin-left: calc((100% - var(--icon-text-width)) / 2);
	color: #222;
}

@media (min-width: 768px) {
	.icon-text {
		margin-block: 90px;
	}
}

/* Adds a fade to the theme's show-on-scroll slide-up; its transition does the fading. The animation sits on
   the grid, not on .icon-text: the theme transitions all properties, which would also animate the breakout's
   width and margin and leave the block shifted while it runs. */
body.animations .icon-text__grid.show-on-scroll:not(.come-in) {
	opacity: 0;
}

body.animations .icon-text .icon-text__grid.icon-text__grid.show-on-scroll {
	transition-property: opacity, transform, visibility;
}

.icon-text__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@container (min-width: 560px) {
	.icon-text__grid {
		grid-template-columns: repeat(min(var(--icon-text-columns), 2), minmax(0, 1fr));
		gap: 48px 32px;
	}
}

@container (min-width: 900px) {
	.icon-text__grid {
		grid-template-columns: repeat(var(--icon-text-columns), minmax(0, 1fr));
	}
}

.icon-text__item {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.icon-text__icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
}

/* Odido's glow icon: the icon, set as mask-image on the element, is only a mask; the gradient gives it its colour. */
.glow-icon {
	display: block;
	background: conic-gradient(from 111.25deg at 50% 50%, #ffad7a 0deg, #80aaff 172.5deg, #a1a4ff 322.5deg, #fead7b 360deg);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.icon-text__body {
	min-width: 0;
}

.icon-text .icon-text__title {
	margin: 0 0 8px;
	color: inherit;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -.02em;
}

/* The theme sizes article paragraphs with a long selector chain and vw values per breakpoint, and bolds
   every p:first-of-type as if it were the article's intro. */
.icon-text .icon-text__text {
	margin: 0 0 16px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}

.icon-text .icon-text__text:last-child {
	margin-bottom: 0 !important;
}

.icon-text .icon-text__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1b5ee4;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
}

.icon-text .icon-text__link:hover,
.icon-text .icon-text__link:focus {
	color: #1b5ee4;
	text-decoration: underline;
}

.icon-text__link svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	transition: transform .3s ease;
}

.icon-text__link:hover svg,
.icon-text__link:focus-visible svg {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.icon-text__link svg {
		transition: none;
	}

	/* The theme's show-on-scroll transition outranks a plain selector. */
	body.animations .icon-text__grid.show-on-scroll {
		transition: none !important;
	}
}