.icons {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--padding-m-2);
	padding-left: var(--padding-m-2);
	padding-right: var(--padding-m-2);
	font-size: var(--font-size-text);
	text-align: center;
}

.icon {
	max-width: 230px;
	min-width: 150px;
}

.icon-image {
	width: 100%;
	margin-bottom: 2em;
}

.icon-title {
	display: block;
	color: var(--color-primary);
	font-weight: var(--font-weight-regular);
}

@media screen and (max-width: 1200px) {
	.icons {
		padding-left: 0;
		padding-right: 0;
	}

	.icon {
		min-width: 120px;
	}
}

@media screen and (max-width: 680px) {
	.icons {
		gap: var(--padding-s);
	}
}

@media screen and (max-width: 360px) {
	.icon {
		width: calc(50% - (var(--padding-s) / 2));
	}
}