.c-text-map {
	padding: var(--spacing-md) 0;
	color: var(--color-primary);

	@media (width > 768px) {
		margin: var(--spacing-md) 0;
	}

	&.c-text-map--background-grey {
		background: var(--color-grey-light);
	}

	&.c-text-map--background-blue {
		color: var(--color-white);
		background-color: var(--color-primary);
	}

	&.c-text-map--background-light-blue {
		color: var(--color-blue);
		background-color: var(--color-blue-light);
	}

	.c-text-map__container {
		display: flex;

		@media (width <= 768px) {
			flex-direction: column;
			gap: var(--spacing-md);
		}

		&.c-text-map__container--map-text {
			@media (width > 768px) {
				flex-direction: row-reverse;
			}

			.c-text-map__content {
				@media (width > 768px) {
					padding-left: var(--spacing-lg);
				}
			}

			.c-text-map__content-inner {
				&.c-text-map__content-inner--constrained {
					justify-self: flex-end;
				}
			}
		}
	}

	.c-text-map__content {
		display: grid;
		position: relative;
		flex: 1 1 50%;

		@media (width > 768px) {
			padding-right: var(--spacing-lg);
		}
	}

	.c-text-map__content-inner {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		justify-content: center;

		&.c-text-map__content-inner--constrained {
			max-width: 480px;
		}
	}

	.c-text-map__title {
		color: var(--color-secondary);
	}

	.c-text-map__text {
		h1, h2, h3, h4, h5, h6 {
			color: inherit;
		}

		a {
			color: var(--color-secondary);

			&:hover,
			&:focus {
				color: var(--color-primary);
			}
		}
	}

	.c-text-map__link {
		display: flex;
		gap: var(--spacing-sm);
		width: fit-content;
		font-weight: bold;

		svg {
			color: var(--color-secondary);
			width: 18px;
			height: auto;
		}
	}

	.c-text-map__map {
		position: relative;
		flex: 1 1 50%;
		aspect-ratio: 600 / 415;
	}
}