.icon-card-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media(min-width: 36em) {
	.icon-card-list {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 1rem;
		grid-row-gap: 2rem;
	}
}

@media(min-width: 62.5em) {
	.icon-card-list {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
	}
}

.icon-card {
	margin-right: 1.25rem;
	display: block;
	position: relative;
	background-color: var(--blue-30);
	box-shadow: var(--box-shadow-default);
}

.icon-card--light {
	background-color: var(--white);
	--blue-30: var(--white);
}

.icon-card .content {
	padding: 1rem 1.5rem 1rem 0;
	display: flex;
	gap: 3rem;
	overflow: hidden;
	align-items: center;
	word-break: break-word;
	--radius: 80px;
	--cx: 5px;
	--cy: 50%;
	background-image:
		radial-gradient(
			circle at var(--cx) var(--cy),
			var(--color-primary--light) 0 var(--radius),
			var(--color-primary--light) var(--radius),
			var(--blue-30) var(--radius)
		);
}

@media(min-width: 36em) {
	.icon-card {
		aspect-ratio: 3 / 2;
	}

	.icon-card .content {
		margin: 0;
		padding: 0;
		height: 100%;
		gap: 0;
		justify-content: center;
		flex-direction: column;
		--radius: 76%;
		--cx: 50%;
		--cy: 49.5%;
		background-image:
			radial-gradient(
				circle at var(--cx) var(--cy),
				var(--color-primary--light) 0 var(--radius),
				var(--color-primary--light) var(--radius),
				var(--blue-30) var(--radius)
			);
	}
}

.icon-card h3 {
	margin: 0;
	font: var(--h4);
}

@media(min-width: 36em) {
	.icon-card h3 {
		max-width: 80%;
		text-align: center;
	}
}

.icon-card img {
	margin-left: 1rem;
	max-width: 2.5rem;
}

@media(min-width: 36em) {
	.icon-card img {
		margin-left: 0;
		max-width: 3.125rem;
	}
}

.icon-card .button {
	padding: 0.5rem;
	width: 2.5rem;
	position: absolute;
	top: calc(50% - 1.25rem);
	right: -1.25rem;
	border: none;
	background-color: var(--color-primary);
	aspect-ratio: 1;
	background-image: url(/assets/icons/caret-right--white.svg);
	background-size: 1.5rem;
	background-repeat: no-repeat;
	background-position: center center;
}

@media(min-width: 36em) {
	.icon-card .button {
		padding: var(--button-padding);
		width: 2.5rem;
		position: absolute;
		top: calc(50% - 1.25rem);
		right: -1.25rem;
	}
}