.c-grid-tiles {
	&.c-grid-tiles--background-blue,
	&.c-grid-tiles--background-grey,
	&.c-grid-tiles--background-white {
		padding: var(--spacing-md) 0;
	}

	&.c-grid-tiles--background-blue {
		background-color: var(--color-blue);

		.c-grid-tiles__tile {
			border-color: var(--color-white);
		}
	}

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

		.c-grid-tiles__tile {
			border-color: var(--color-blue);
		}
	}

	&.c-grid-tiles--background-white {
		.c-grid-tiles__tile {
			border-color: var(--color-blue);
		}
	}

	.c-grid-tiles__grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: var(--spacing-sm);

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

		@media (width >= 1024px) {
			gap: var(--spacing-md);
		}

		&.c-grid-tiles__grid--columns-three {
			@media (width >= 1024px) {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		&.c-grid-tiles__grid--columns-four {
			@media (width >= 1024px) {
				grid-template-columns: repeat(4, 1fr);
			}
		}
	}
}