.c-icon-grid {
	padding: var(--spacing-md) 0;
	color: var(--color-primary);

	&.c-icon-grid--background-grey {
		background-color: var(--color-grey-light);
	}

	&.c-icon-grid--background-white {
		.c-icon-grid__icon {
			background-color: var(--color-grey-light);
		}
	}

	.c-icon-grid__heading {
		margin-bottom: var(--spacing-sm);
	}

	.c-icon-grid__grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: var(--spacing-md);

		@media (width >= 480px) and (width < 1024px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (width >= 1024px) {
			grid-template-columns: repeat(3, 1fr);
			gap: var(--spacing-md);
		}
	}

	.c-icon-grid__grid-item {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		font-size: 14px;

		@media (width > 768px) {
			font-size: 20px;
		}

		img {
			width: 24px;
			height: 24px;
		}
	}

	.c-icon-grid__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45px;
		height: 45px;
		padding: 10px;
		background-color: var(--color-white);
		border-radius: 50%;
	}
}