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

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

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

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

	.c-image-text__container {
		display: flex;

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

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

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

			.c-image-text__content-inner {
				&.c-image-text__content-inner--constrained {
					justify-self: flex-end;
				}
			}
		}
	}

	.c-image-text__content {
		display: grid;
		position: relative;
		flex: 1 1 50%;

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

	.c-image-text__content-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;

		&.c-image-text__content-inner--constrained {
			@media (width > 768px) {
				max-width: 480px;
			}
		}
	}

	.c-image-text__icon {
		width: 40px;
		height: auto;
		margin-bottom: var(--spacing-sm);
	}

	.c-image-text__title {
		margin-top: 0;
		color: inherit;
	}

	.c-image-text__buttons {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--spacing-lg) / 2);
	}

	.c-image-text__image-wrapper {
		position: relative;
		flex: 1 1 50%;
		aspect-ratio: 650 / 450;

		.c-image-text__image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}