.card-statement {
	padding-block: var(--space-card-statement-section);
	background: var(--color-page);
}

.card-statement__container {
	display: flex;
	justify-content: center;
}

.card-statement__card {
	position: relative;
	display: flex;
	inline-size: min(100%, var(--size-card-statement-card));
	align-items: center;
	padding: var(--space-card-statement-card-padding);
	border: var(--size-card-statement-border) dashed var(--color-card-statement-border);
	border-radius: var(--radius-card-statement-card);
	background: var(--color-white);
}

.card-statement__content,
.card-statement__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.card-statement__content { gap: var(--space-card-statement-content); }

.card-statement__heading { gap: var(--space-card-statement-heading); }

.card-statement__eyebrow,
.card-statement__title,
.card-statement__description { margin: 0; }

.card-statement__eyebrow {
	padding: var(--space-card-statement-eyebrow);
	border-radius: var(--radius-card-statement-eyebrow);
	background: var(--color-page);
	color: var(--color-trusted);
	font-size: var(--fs-card-statement-eyebrow);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: var(--tracking-card-statement-eyebrow);
	text-transform: uppercase;
}

.card-statement__title {
	font-size: var(--fs-card-statement-title);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: var(--tracking-card-statement-title);
}

.card-statement__title span,
.card-statement__title em { display: block; }

.card-statement__title em {
	color: var(--color-trusted);
	font-style: italic;
}

.card-statement__description {
	max-inline-size: var(--size-card-statement-description);
	color: var(--color-text-muted);
	font-size: var(--fs-card-statement-description);
	font-weight: var(--fw-semibold);
	line-height: 1.35;
}

.card-statement__icon {
	position: absolute;
	inset-block-start: var(--position-card-statement-icon-block);
	inset-inline-end: var(--position-card-statement-icon-inline);
	display: grid;
	inline-size: var(--size-card-statement-icon-surface);
	block-size: var(--size-card-statement-icon-surface);
	place-items: center;
	border-radius: var(--radius-card-statement-icon);
	background: var(--color-process-darkest);
}

.card-statement__icon .icon {
	inline-size: var(--size-card-statement-icon-inline);
	block-size: var(--size-card-statement-icon-block);
}

@media (max-width: 1023px) {
	.card-statement__container { padding-inline: var(--space-card-statement-container-mobile); }

	.card-statement__card { padding: var(--space-card-statement-card-padding-mobile); border-radius: var(--radius-card-statement-card-mobile); }

	.card-statement__content { gap: var(--space-card-statement-content-mobile); }

	.card-statement__heading { gap: var(--space-card-statement-heading-mobile); }

	.card-statement__eyebrow {
		padding: var(--space-card-statement-eyebrow-mobile);
		border-radius: var(--radius-card-statement-eyebrow-mobile);
		font-size: var(--fs-card-statement-eyebrow-mobile);
		letter-spacing: var(--tracking-card-statement-eyebrow-mobile);
	}

	.card-statement__title { font-size: var(--fs-card-statement-title-mobile); letter-spacing: var(--tracking-card-statement-title-mobile); }

	.card-statement__title span,
	.card-statement__title em { display: inline; }

	.card-statement__description { max-inline-size: none; font-size: var(--fs-card-statement-description-mobile); line-height: 1.25; }

	.card-statement__icon {
		inset-block-start: var(--position-card-statement-icon-block-mobile);
		inset-inline-end: var(--position-card-statement-icon-inline-mobile);
		inline-size: var(--size-card-statement-icon-surface-mobile);
		block-size: var(--size-card-statement-icon-surface-mobile);
		border-radius: var(--radius-card-statement-icon-mobile);
	}

	.card-statement__icon .icon { inline-size: var(--size-card-statement-icon-inline-mobile); block-size: var(--size-card-statement-icon-block-mobile); }
}
