.c-txt-image {
	margin: 6rem 0;
	container-type: inline-size;
}

.c-txt-image.visible {
	@container (min-width: 1024px) {
		.c-txt-image__title {
			animation: slideUp 600ms ease both;
		}

		.c-txt-image__picture {
			animation: fadeIn 600ms 450ms ease both;
		}

		.c-txt-image__rich-text {
			animation: slideUp 600ms 650ms ease both;
		}

		.c-txt-image__cta {
			animation: slideUp 600ms 1050ms ease both;
		}
	}
}

.c-txt-image__title,
.c-txt-image__cta {
	@container (min-width: 1024px) {
		opacity: 0;
	}
}

.c-txt-image__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5rem;
}

.c-txt-image__content {
	display: flex;
	align-items: center;

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

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

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

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

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

.c-txt-image__picture {
	display: block;
	overflow: hidden;

	@container (min-width: 1024px) {
		opacity: 0;
	}

	@container (min-width: 768px) {
		flex: 0 0 56%;

		.c-txt-image--centered & {
			flex: 1;
		}
	}
}

.c-txt-image__rich-text {
	flex-grow: 1;

	@container (min-width: 1024px) {
		opacity: 0;
	}

	.c-txt-image--centered & {
		flex: 1;
	}
}

.c-txt-image__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}