.circles-row {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: center;
	z-index: 1;
	padding-inline: 1rem;
	padding-block: var(--gap);

	::selection {
		background-color: color-mix(in hsl, var(--data-selection, var(--palette-white)), transparent 80%);
	}
}

@media (min-width: 744px) {
	.circles-row {
		padding-inline: 2rem;
	}
}

.circle-item {
	display: flex;
	position: relative;
	row-gap: 0.5em;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	container-type: inline-size;
	margin-inline: -1rem;
	margin-block-start: -2rem;
	border-radius: 50%;
	padding-inline: 2rem;
	padding-block: 2rem;
	aspect-ratio: 1/1;
	inline-size: 100%;
	max-inline-size: calc(50% + 2rem);
	color: var(--palette-white);
	font-size: var(--font-size-sm);
	text-align: center;

	&:nth-first-child(1),
	&:nth-first-child(2) {
		margin-block-start: 0;
	}

	&::after {
		position: absolute;
		z-index: -1;
		mix-blend-mode: multiply;
		inset: 0;
		border-radius: 50%;
		background-color: var(--color-accent);
		content: "";
	}
}

.circle-item-content {
	max-inline-size: 100%;
}

@media (min-width: 540px) {
	.circle-item {
		font-size: var(--font-size-sm);
	}
}

@media (min-width: 744px) {
	.circle-item {
		padding-inline: 1em;
		max-inline-size: calc(33.33% + 2rem);
	}
}

@media (min-width: 1260px) {
	.circle-item {
		max-inline-size: calc(20% + 2rem);
	}
}

@media (min-width: 1620px) {
	.circle-item {
		margin-inline: -2rem;
		margin-block-end: 0;
		padding-inline: 2em;
		padding-block: 1em;
		max-inline-size: calc(20% + 4rem);
		font-size: var(--font-size-md);
	}
}

.circle-item-icon {
	flex-shrink: 0;
	font-size: calc(var(--font-size-xxl));
	line-height: 1;
}

@media (min-width: 540px) {
	.circle-item-icon {
		font-size: calc(var(--font-size-xxl) * 1.2);
	}
}

@media (min-width: 1260px) {
	.circle-item-icon {
		font-size: calc(var(--font-size-xxl) * 1.35);
	}
}