:root {
	--red-100: #e63817;
	--red-25: #f7ccc4;
	--red-10: #fcebe7;
	--green-100: #13bf87;
	--green-25: #c4efe1;
	--green-10: #e7f8f3;
	--purple-100: #4800e3;
	--purple-25: #d1bff8;
	--purple-10: #ece5fc;
	--yellow-100: #ffc118;
	--yellow-25: #ffefc5;
	--yellow-10: #fff8e7;
	--blue-100: #0e6aed;
	--blue-25: #c3dafb;
	--blue-10: #e6f0fd;
	--dark-100: #092c47;
	--dark-25: #c1cad1;
	--dark-10: #e6e9ec;
}

/* generated color utilities */
.color-style_blue {
	background-color: var(--blue-10);
	border: 1px solid var(--blue-25);
}
.color-style_blue svg path {
	fill: var(--blue-100);
}

.color-style_dark {
	background-color: var(--dark-10);
	border: 1px solid var(--dark-25);
}
.color-style_dark svg path {
	fill: var(--dark-100);
}

.color-style_red {
	background-color: var(--red-10);
	border: 1px solid var(--red-25);
}
.color-style_red svg path {
	fill: var(--red-100);
}

.color-style_green {
	background-color: var(--green-10);
	border: 1px solid var(--green-25);
}
.color-style_green svg path {
	fill: var(--green-100);
}

.color-style_yellow {
	background-color: var(--yellow-10);
	border: 1px solid var(--yellow-25);
}
.color-style_yellow svg path {
	fill: var(--yellow-100);
}

.color-style_purple {
	background-color: var(--purple-10);
	border: 1px solid var(--purple-25);
}
.color-style_purple svg path {
	fill: var(--purple-100);
}

/* callout block */
.callout-block {
	display: flex;
	border-radius: 12px;
	padding: 20px;
	gap: 20px;
}
.callout-block svg {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

/* ≈ @include max-tablet */
@media (max-width: 1024px) {
	.callout-block {
		gap: 12px;
	}
}

/* ≈ @include max-small-mobile */
@media (max-width: 480px) {
	.callout-block {
		gap: 8px;
		padding: 12px;
	}
	.callout-block svg {
		width: 24px;
		height: 24px;
	}
}