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

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

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

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

	.c-text-custom-html__container {
		display: flex;
		gap: var(--spacing-md);

		&.c-text-custom-html__container--html-text {
			flex-direction: row-reverse;
		}

		&.c-text-custom-html__container--one-three {
			@media (width <= 1024px) {
				flex-direction: column;
			}

			&.c-text-custom-html__container--html-text {
				@media (width <= 1024px) {
					flex-direction: column-reverse;
				}
			}

			/* Normal order (Text left, HTML right) */
			&:not(.c-text-custom-html__container--html-text) > :nth-child(1) {
				flex: 1 1 33.33%;
			}
			&:not(.c-text-custom-html__container--html-text) > :nth-child(2) {
				flex: 1 1 66.66%;
			}
			/* Reversed order (HTML left, Text right) */
			&.c-text-custom-html__container--html-text > :nth-child(1) {
				flex: 1 1 66.66%;
			}
			&.c-text-custom-html__container--html-text > :nth-child(2) {
				flex: 1 1 33.33%;
			}
		}

		&.c-text-custom-html__container--three-one {
			@media (width <= 1024px) {
				flex-direction: column;
			}

			&.c-text-custom-html__container--html-text {
				@media (width <= 1024px) {
					flex-direction: column-reverse;
				}
			}

			/* Normal order */
			&:not(.c-text-custom-html__container--html-text) > :nth-child(1) {
				flex: 1 1 66.66%;
			}
			&:not(.c-text-custom-html__container--html-text) > :nth-child(2) {
				flex: 1 1 33.33%;
			}
			/* Reversed order */
			&.c-text-custom-html__container--html-text > :nth-child(1) {
				flex: 1 1 33.33%;
			}
			&.c-text-custom-html__container--html-text > :nth-child(2) {
				flex: 1 1 66.66%;
			}
		}

		&.c-text-custom-html__container--one-one {
			@media (width <= 1024px) {
				flex-direction: column;
			}

			&.c-text-custom-html__container--html-text {
				flex-direction: row-reverse;

				@media (width <= 1024px) {
					flex-direction: column-reverse;
				}
			}

			> :nth-child(1),
			> :nth-child(2) {
				flex: 1 1 50%;
			}
		}
	}

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

		img {
			width: 100%;
			height: auto;
		}
	}

	.c-text-custom-html__html {
		padding: var(--spacing-md);
		background-color: var(--color-white);
		color: var(--color-primary);

		&.c-text-custom-html__html--background-none {
			background-color: transparent;
			padding: 0;
		}

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

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

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

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