.c-txt-image-bg-gradient {
	padding: var(--blocks-padding) 0;
	container-type: inline-size;
	background: var(--text-image-bg-gradient-bg);
}

.c-txt-image-bg-gradient__inner {
	display: flex;
	align-items: center;

	@container (min-width: 1024px) {
		gap: 9.6rem;
	}

	@container (max-width: 1023px) {
		gap: 4rem;
	}

	@container (min-width: 768px) {
		flex-direction: row-reverse;

		.c-txt-image-bg-gradient--reversed & {
			flex-direction: row;
		}
	}

	@container (max-width: 767px) {
		flex-direction: column;
	}
}

.c-txt-image-bg-gradient__picture {
	display: block;
	overflow: hidden;

	@media (min-width: 768px) {
		flex: 0 0 40.5%;
	}
}

.c-txt-image-bg-gradient__rich-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.4rem;
	flex: 1;
	color: var(--color-text-primary);

	h2,
	h3,
	h4,
	h5 {
		color: var(--text-image-bg-gradient-text) !important;
	}

	p,
	ul,
	ol {
		&:last-child {
			margin-bottom: 0;
		}
	}
}

.c-txt-image-bg-gradient__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}